Olá web developer! Ao estilizar elementos no CSS, muitas vezes precisamos definir dimensões. Porém, o modo como as dimensões dos elementos são calculadas podem causar alguns problemas.
Onde quero chegar com isso? Bom, algumas pessoas desconhecem que temos duas maneiras de calcular o tamanho dos elementos. Você conhece?
Tamanho baseado no conteúdo
Imagine uma div
com um texto dentro. Vamos definir sua largura como 100px
e altura também sendo 100px
. Isso deveria resultar em um quadrado, já que largura e altura estão iguais, certo? Mas e se eu colocar uma margem interna (padding) de 50px
à esquerda? Qual será o tamanho?
.box{
width: 100px;
height: 100px;
padding-left: 50px;
}
Veja que o resultado foi um retângulo com uma largura de 150px
. A forma padrão de se calcular o tamanho de um elemento é a soma de sua largura ou altura (width ou height), margem interna (padding) e grossura da borda (border).
Isso pode causar problemas em algumas ocasiões. Imagine que agora a gente queira criar um elemento que preencha 100% da largura de seu pai, mas que também tenha uma margem interna para que o texto não fique encostado em suas bordas. Para isso, vou criar um container para essa nossa caixa:
.container{
width: 100px;
height: 100px;
border: 5px solid rgba(0,0,0,0.5);
}
E vou mudar a nossa caixa agora para que a largura seja 100%
ao invés de deixar 100px
fixos. Assim, nossa caixa poderá preencher dinamicamente dependendo do tamanho do elemento pai.
.box{
width: 100%;
height: 100px;
padding-left: 50px;
}
Teremos o seguinte resultado:
Veja que a nossa caixa ultrapassou o tamanho do seu elemento pai, pois o padding-left
de 50px foi somado à largura, resultado em uma largura total de 150px. Isso pode ser a causa de problemas quando vamos definir dimensões de um elemento dentro de outro e o layout acaba quebrando quando pensamos que deveria estar tudo certo.
Tamanho baseado nas bordas
Para evitar o problema mostrado anteriormente, podemos usar a propriedade box-sizing
para indicar como queremos que o navegador calcule as dimensões dos elementos. O valor padrão do box-sizing
é content-box
. Veja o que acontece quando alteramos para border-box
:
.box{
width: 100%;
height: 100px;
padding-left: 50px;
box-sizing: border-box;
}
O box-sizing
com o valor border-box
faz com que o navegador não calcule a dimensão de um elemento somando bordas e margens com altura e largura.
Com content-box
, ao definir width: 100px
, o interior (conteúdo) do elemento terá 100px, mas por termos padding-left: 50px
, o tamanho total do elemento será 150px.
Com border-box
, se definirmos por exemplo, width: 100px
, não importa se colocarmos padding-left: 50px
, o tamanho final do elemento será os 100px que definimos em width
. Mas como definimos 50px de padding-left
, agora o interior do elemento terá apenas 50px de espaço para que o elemento possua 100px de largura no total.
Para evitar problemas, muitas pessoas gostam de forçar o comportamento de todos os elementos e pseudo-elementos como border-box
usando o seguinte código:
*, *::before, *::after {
box-sizing: border-box;
}
Dependendo do que você está criando, se está trabalhando com texto, criando layouts, etc, cada comportamento pode ser o mais indicado.