Isso é muito estranho, certo? Porque por que alguém atribuiria a mesma largura e altura a dois div elementos, a menos que eles idealmente desejassem que esses elementos fossem os mesmos?
Continue lendo para descobrir por que os dois div elementos são diferentes👨🏾💻👩🏽💻.
Por padrão, o Modelo de caixa CSS calcula qualquer elemento que aceite uma largura ou altura neste formato:
- width + padding + border = largura renderizada ou exibida da caixa do elemento.
- height + padding + border = altura renderizada ou exibida da caixa do elemento.
Isso significa que sempre que você adiciona padding ou border para o elemento, o tamanho de um elemento parecerá maior que o tamanho originalmente atribuído a ele. Isso ocorre porque o conteúdo desse elemento inclui o width e height propriedades, mas não inclui o padding ou border propriedade.
Ainda não entendeu ainda? Veja o snippet de código abaixo para ver o cálculo real.
.first-box {
width: 200px;
height: 100px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px
Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */
}
.second-box {
width: 200px;
height: 100px;
border: 8px solid blue;
background: yellow;
/* Total width: 200px + (2 * 8px) = 216px
Total height: 100px + (2 * 8px) = 116px */
}
Como visto no trecho de código, o CSS adiciona o padding e border ao width e height já especificado. Ele exibe o valor total como o tamanho do elemento, ignorando o tamanho real que você atribuiu ao div.
Com a propriedade de dimensionamento de caixa CSS
Com o box-sizing propriedade, o comportamento padrão explicado acima pode ser alterado.
Usando o mesmo código, vamos adicionar o box-sizing propriedade e defina-a como border-box e ver se podemos realmente controlar o tamanho.
Você deve ter notado que os dois div elementos agora têm o mesmo tamanho.
Sintaxe
box-sizing:content-box;
box-sizing:border-box;
caixa de conteúdo
Esse é o comportamento padrão da propriedade de dimensionamento de caixa. content-box não leva em conta o width e height especificado para um elemento.
Ou seja, se você definir um elemento width para 200 pixelse defina a borda como 8 pixels e o preenchimento para 20 pixels, o tamanho do border e padding será adicionado à largura final renderizada. Isso torna o elemento mais largo do que 200 pixels.
div{
width: 200px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/
}
Como visto no snippet de código acima, o tamanho deste div O elemento aumentou automaticamente para 256px, mesmo quando foi originalmente definido para 200px.
caixa de borda
Quando você define o box-sizing propriedade para border-box, ele instrui o navegador a responder por qualquer border e padding atribuído à largura e altura do elemento.
Ou seja, se você definir um elemento width para 200 pixels, esses 200 pixels incluirão qualquer borda ou preenchimento que você adicionar e a caixa de conteúdo diminuirá para absorver essa largura extra.
div{
width: 200px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/
}
Como visto no snippet de código acima, o tamanho deste div O elemento foi reduzido automaticamente para 144px, mesmo quando foi originalmente definido para 200px.
Vamos mesclar os dois trechos de código e ver exatamente como a caixa ficará com content-box e border-box.
Conclusão
Com a propriedade de dimensionamento de caixa CSS, você pode definir como o tamanho dos elementos no seu código é calculado.
De acordo com MDN, geralmente é útil definir box-sizing para border-box quando você está colocando elementos. Isso facilita muito o manuseio dos tamanhos dos elementos e geralmente elimina várias armadilhas nas quais você pode tropeçar enquanto apresenta seu conteúdo.
Por outro lado, quando você está usando position: relative ou position: absolute, usando box-sizing: content-box permite que os valores de posicionamento sejam relativos ao conteúdo e independentes das alterações nos tamanhos de borda e preenchimento. Às vezes você pode querer isso.
Isso é tudo, pessoal! Eu espero que isso tenha sido útil. Nesse caso, compartilhe este artigo e siga-me no Twitter.