Largura e altura exatas no CSS

Matheus Alves
Dec 23, 2018 · 3 min read
Photo by chuttersnap on Unsplash

Ovalor da propriedade width que você definiu não é a largura do seu elemento. O valor da propriedade height que você definiu não é a altura do seu elemento. Estranho, não é? Mas o fato é que o CSS, por padrão, não usa somente essas definições para construir os quadradinhos das divisões que você cria em seu site.

O que ocorre é que o CSS, na prática, trabalha com uma série de outras propriedades para alcançar a largura e a altura total de um elemento criado, onde somado aos valores de width e height estará as larguras das propriedades padding e border.

As propriedades width e height que você define quando cria um novo elemento, nada mais é do que uma referência ao espaço que será dado ao conteúdo do seu elemento, ou seja, o preenchimento (padding) e a borda (border) não serão incluídas no valor atribuído a elas, porém vão surtir efeito no resultado, funcionando, portanto, como caixas extras.

Isso quer dizer que se você cria uma divisão (div do HTML) e adiciona 100px como valor para width e height e em seguida adiciona uma borda de 25px, no final você não terá um elemento de 100px por 100px como esperado e sim um elemento com 150px por 150px, pois são somados os 25px da borda da esquerda e de cima e os 25px da borda da direita e de baixo.

O tamanho não obedece o valor de “width” e “height

No entanto, se você quer uma largura exata como a qual você definiu, esse problema pode ser facilmente resolvido com a utilização da propriedade box-sizing que informa ao CSS como ele deve interpretar as propriedades width e height nas caixas criadas. A box-sizing aceita dois valores: content-box e border-box. O valor content-box é o padrão e faz com que width e height seja definido somente para o conteúdo da caixa. Já o border-box faz com que o CSS inclua a largura do preenchimento e da borda nas dimensões do conteúdo da caixa, deixando-o com as dimensões exatas definidas.

Isso significa que se adicionarmos box-sizing: border-box na situação apresentada mais acima, o elemento ficaria finalmente com 100px como intuitivamente era esperado. No entanto, vale a pena lembrar que para que isso funcione bem, as dimensões do conteúdo serão diminuídas deixando de ser 100px por 100px e tornando 50px por 50px, para dar espaço à borda.

Observe que o texto quebrou em duas linhas
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade