Partes do Box Model
Conteúdo (Content): É a área onde o conteúdo do elemento (texto, imagens, etc.) é exibido.
Padding (Preenchimento): Espaço entre o conteúdo e a borda do elemento.
Border (Borda): A linha que envolve o padding e o conteúdo.
Margin (Margem): Espaço fora da borda, que separa o elemento de outros elementos.
Exemplo Visual do Box Model
Aqui, a caixa acima ilustra o box model. As cores representam: Conteúdo, Padding, Border, e Margin.
Como width e height se relacionam com o Box Model?
As propriedades width e height definem o tamanho do conteúdo
da caixa. Por exemplo:
div {
width: 200px;
height: 100px;
}
Nesse caso, a área de conteúdo do div terá 200px de largura e 100px de altura.
No entanto, o tamanho total do elemento na página depende não apenas do width e
height, mas também do padding, border e
margin.
Exemplo Prático
Suponha que você tenha o seguinte CSS:
div {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
margin: 30px;
}Aqui está como o box model funciona:
- Conteúdo: 200px (largura) x 100px (altura).
- Padding: Adiciona 20px em todos os lados. Agora, a largura total do conteúdo + padding é 240px, e a altura é 140px.
- Border: Adiciona 10px em todos os lados. A largura total agora é 260px, e a altura é 160px.
- Margin: Adiciona 30px de espaço externo em todos os lados. A margem não afeta o tamanho total da caixa, mas afeta o espaço ao redor dela.
Box-Sizing: Controlando o Cálculo
Por padrão, o CSS usa o modelo content-box, onde o width e height
se referem apenas ao conteúdo. No entanto, você pode mudar isso com a propriedade
box-sizing:
div {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box;
}
Nesse caso, o tamanho total da caixa será exatamente 200px de largura e 100px de altura, incluindo o padding e a borda.
Resumo
widtheheightdefinem o tamanho do conteúdo.- O tamanho total do elemento depende também do padding, border e margin.
- Use
box-sizing: border-box;para incluir padding e borda no cálculo dowidtheheight.