Box Model

Quando vamos trabalhar com elementos HTML, devemos olhar para eles como se fossem pequenas caixas, cada elemento é como se fosse uma pequena caixa com várias partes.

É aí que entra a Box Model do CSS! Ela ajuda a definir e controlar essas partes (conteúdo, preenchimento, borda e margem) para que o elemento fique com o layout desejado.

Com essa técnica, você pode ajustar a aparência e o espaço ocupado por cada elemento na página, garantindo que sua página fique bonita e organizada em diferentes dispositivos.

Principais propriedades

A Box Model é composta por quatro propriedades principais que definem a aparência e o espaço ocupado por cada elemento na página:

• Conteúdo (content): é a área onde o conteúdo do elemento é exibido, podemos ajustar essa area modificando a altura e largura do nosso elemento (height/width);
• Preenchimento (padding): define o espaçamento entre o conteúdo e a borda do elemento;
• Borda (border): define a borda do elemento;
• Margem (margin): define o espaço entre a borda do elemento e o elemento adjacente.

Width

Com a propriedade width podemos definir a largura da nossa caixa.

div {
  width: 100px;
}

.target {
  width: 5px;
}

Height

Com a propriedade height podemos definir a altura da nossa caixa.

section {
  height: 100%;
}

.target {
  height: 5px;
}

Margin

Com a propriedade margin podemos definir um espaçamento externo em nosso elemento

.classe, elemento {
  margin: 10px;
}

.target {
  margin-right: 5px;
}

Padding

Com a propriedade padding podemos definir um espaçamento interno em nosso elemento.

.classe, elemento {
  padding: 10px;
}

.target {
  padding-left: 5px;
}

Border

Os estilos da borda podem ser divididos em três partes:

• Largura
• Estilo
• cor

Para determinar a largura da borda utilizamos a propriedade border-width.

.target {
  border-width: 1px;
}

Para alterar o estilo da borda utilizamos a propriedade border-style.

Seus possíveis valores são:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

.target {
  border-style: solid;
}

E por fim, a propriedade border-color para alterar a cor da borda.

.target {
  border-color: #000;
}

Border Radius

Com a propriedade border-radius podemos adicionar algum arredondamento nas bordas.

.target {
  border-radius: 4px;
}