Como o CSS enxerga cada elemento: conteúdo, padding, border e margin
No CSS, todo elemento HTML é tratado como uma caixa retangular. Essa caixa é composta por quatro camadas, de dentro para fora: conteúdo, padding, borda e margem.
Carregando...Entender o Box Model é fundamental para controlar o tamanho e o espaçamento dos elementos na tela.
Conteúdo: é onde o texto ou a imagem aparece. As propriedades width e height controlam essa área.
Padding: o espaço interno entre o conteúdo e a borda. O plano de fundo do elemento cobre o padding.
Border: a linha ao redor do elemento, entre o padding e a margin.
Margin: o espaço externo ao redor do elemento, separando-o dos vizinhos. É sempre transparente.
Por padrão, quando você define width: 300px, está definindo apenas a largura do conteúdo. O padding e a borda são somados por cima:
Carregando...Isso causa confusão e quebra layouts com frequência.
A propriedade box-sizing: border-box muda esse comportamento. Com ela, o width passa a incluir padding e borda, e o conteúdo encolhe para caber.
Carregando...A prática mais comum é aplicar isso em todos os elementos do projeto logo no início:
Carregando...A grande maioria dos projetos modernos começa com esse reset. É considerado uma boa prática e elimina boa parte dos problemas de dimensionamento.