📦 Box Model (margin, padding, border)

Em CSS, todo elemento HTML é visto como uma caixa retangular. O Box Model é o conjunto de regras que define como essa caixa é dimensionada e como ela interage com outras caixas.

Os Componentes do Box Model

O modelo é composto por quatro partes, de dentro para fora:

  1. Conteúdo (Content): A área onde o seu texto e imagens aparecem.
  2. Preenchimento (Padding): Uma área transparente ao redor do conteúdo, dentro da borda.
  3. Borda (Border): Uma linha que envolve o preenchimento e o conteúdo.
  4. Margem (Margin): Uma área transparente fora da borda, que "empurra" outros elementos.
Margem
Borda
Padding
Conteúdo

Propriedades e Atalhos (Shorthands)

Você pode definir os valores para cada lado (top, right, bottom, left) ou usar atalhos.

.minha-caixa {
    /* 4 valores: topo, direita, baixo, esquerda */
    margin: 10px 20px 10px 20px;

    /* 2 valores: (topo e baixo), (esquerda e direita) */
    padding: 15px 30px;

    /* 1 valor: todos os lados iguais */
    border-width: 2px;

    /* Propriedade completa da borda */
    border: 2px solid #4f46e5;
}

A Propriedade `box-sizing`

Por padrão (box-sizing: content-box), a largura e altura de um elemento se aplicam apenas ao conteúdo. Padding e borda são adicionados a essa medida, aumentando o tamanho final da caixa.

Com box-sizing: border-box, a largura e altura definidas incluem o conteúdo, o padding e a borda. Isso torna o layout muito mais previsível.

.caixa-padrao {
    box-sizing: content-box; /* Padrão */
    width: 200px; /* Largura do conteúdo */
    padding: 20px;
    border: 10px solid;
    /* Largura total = 200 + 20 + 20 + 10 + 10 = 260px */
}

.caixa-moderna {
    box-sizing: border-box;
    width: 200px; /* Largura total da caixa */
    padding: 20px;
    border: 10px solid;
    /* Largura total = 200px */
}

content-box (Largura total: 260px)

Largura: 200px

border-box (Largura total: 200px)

Largura: 200px