O que faz `* { box-sizing: border-box; }`?
Quais as vantagens?* { box-sizing: border-box; } faz com que cada elemento na página use a abordagem box: border-box para calcular os elementos height e width.
Qual é a diferença?
Por padrão, os elementos têm box-sizing: content-box aplicado, e apenas o tamanho do conteúdo está sendo contabilizado se um elemento tem height e width especificados. box-sizing: border-box altera como a width e height dos elementos estão sendo calculadas, a border e o padding também são incluídos no cálculo. O height de um elemento é agora calculado pelo conteúdo height + padding vertical + border horizontal. A width de um elemento é agora calculada pela width do conteúdo + padding horizontal + largura da horizontal border.
A tabela a seguir indica se a propriedade é incluída ou não no cálculo da altura e largura do elemento quando ele tem o respectivo box-sizing:
| Propriedade | box-sizing: content-box (padrão) | box-sizing: border-box |
|---|---|---|
| conteúdo | Sim | Sim |
padding | Não | Sim |
border | Não | Sim |
margin | Não | Não |
Vantagens
Levar em consideração paddings e borders como parte do modelo de caixa é mais coerente com a forma como os designers imaginam o conteúdo em grades. Essa é uma maneira mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS definem globalmente * { box-sizing: border-box; } para que todos os elementos usem esse modelo de caixa por padrão.