Matheus Alves (@theuves)
Matheus Alves

Largura e altura exatas no CSS

O valor 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