Box Model em CSS

Box Model em CSS

O Box Model é um conceito fundamental em CSS que define como os elementos HTML são renderizados na página. Cada elemento HTML é considerado como uma caixa retangular que pode ser manipulada através de propriedades CSS. Essas propriedades incluem a largura e altura da caixa, as margens, o preenchimento e a borda.

A caixa em si é composta por quatro partes: o conteúdo, o preenchimento, a borda e a margem. O conteúdo é a área dentro da caixa que contém o texto, as imagens e outros elementos HTML. O preenchimento é a área entre o conteúdo e a borda, que pode ser preenchida com uma cor ou imagem de fundo. A borda é a linha que circunda a caixa, que pode ser configurada com diferentes estilos, cores e larguras. E a margem é a área fora da borda, que pode ser usada para criar espaçamento entre as caixas.

Para entender melhor o Box Model, vamos dar uma olhada em algumas propriedades CSS que afetam cada uma das partes da caixa:

Largura e altura

A propriedade width define a largura da caixa, enquanto a propriedade height define a altura. Essas propriedades podem ser definidas em pixels, em, porcentagem ou em outras unidades. Por exemplo:

.box {
  width: 200px;
  height: 100px;
}

Nesse exemplo, a caixa terá uma largura de 200 pixels e uma altura de 100 pixels.

Preenchimento

A propriedade padding define o preenchimento da caixa, ou seja, a distância entre o conteúdo e a borda. O preenchimento pode ser definido em pixels, em, porcentagem ou em outras unidades. Por exemplo:

.box {
  padding: 20px;
}

Nesse exemplo, a caixa terá um preenchimento de 20 pixels em todas as direções (topo, direita, baixo e esquerda).

Borda

A propriedade border define a borda da caixa. Ela pode ser configurada com diferentes estilos, cores e larguras. Por exemplo:

.box {
  border: 2px solid black;
}

Nesse exemplo, a caixa terá uma borda sólida de 2 pixels de largura e cor preta.

Margem

A propriedade margin define a margem da caixa, ou seja, a distância entre a borda da caixa e outras caixas na página. A margem pode ser definida em pixels, em, porcentagem ou em outras unidades. Por exemplo:

.box {
  margin: 20px;
}

Nesse exemplo, a caixa terá uma margem de 20 pixels em todas as direções (topo, direita, baixo e esquerda).

Em resumo, o Box Model é um conceito fundamental em CSS que permite aos desenvolvedores web controlar o layout e o design dos elementos HTML na página. Ao entender como cada parte da caixa é afetada pelas propriedades CSS, é possível criar layouts complexos e visualmente atraentes.

Próxima página do Ebook Gratuito:

7Posicionamento em CSS

2 minutos