O Box Model é um dos conceitos mais importantes do CSS.
Ele define como todos os elementos HTML são representados como caixas dentro de uma página Web.
O modelo de caixa define o espaço ocupado por um elemento através de quatro partes principais:
| Parte | Descrição |
|---|---|
| Content | Conteúdo do elemento. |
| Padding | Espaço interno. |
| Border | Borda do elemento. |
| Margin | Espaço externo. |
+---------------------------+
| MARGIN |
| +---------------------+ |
| | BORDER | |
| | +---------------+ | |
| | | PADDING | | |
| | | +-----------+ | | |
| | | | CONTENT | | | |
| | | +-----------+ | | |
| | +---------------+ | |
| +---------------------+ |
+---------------------------+
É a área onde ficam textos, imagens ou outros elementos.
div {
width:300px;
height:200px;
}
Define largura e altura do conteúdo.
Padding cria espaço entre o conteúdo e a borda.
div {
padding:20px;
}
O conteúdo fica afastado das bordas.
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
Também podemos usar o atalho:
padding:10px 20px;
A borda fica entre o padding e a margem.
div {
border:2px solid black;
}
| Tipo | Descrição |
|---|---|
| solid | Linha contínua. |
| dashed | Linha tracejada. |
| dotted | Pontos. |
| double | Linha dupla. |
Margin cria distância entre elementos.
div {
margin:20px;
}
| Propriedade | Localização |
|---|---|
| Padding | Dentro da caixa. |
| Margin | Fora da caixa. |
A propriedade box-sizing controla como largura e altura são calculadas.
* {
box-sizing:border-box;
}
| Modelo | Comportamento |
|---|---|
| content-box | Padding e borda aumentam tamanho. |
| border-box | Tamanho inclui padding e borda. |
Largura final =
width
+
padding esquerdo/direito
+
border esquerdo/direito
+
margin
.card {
width:300px;
padding:20px;
border:5px solid black;
margin:30px;
}
O tamanho final será maior que 300px utilizando content-box.
| Elemento | Uso |
|---|---|
| Cards | Padding interno. |
| Containers | Margin externa. |
| Botões | Padding para tamanho. |
| Erro | Problema |
|---|---|
| Confundir margin e padding | Layout incorreto. |
| Ignorar box-sizing | Cálculos inesperados. |
| Usar muitos espaços fixos | Problemas responsivos. |
| Elemento | Função |
|---|---|
| Content | Conteúdo. |
| Padding | Espaço interno. |
| Border | Borda. |
| Margin | Espaço externo. |