Modelo de caixa (box model)

O modelo de caixa (box model) é um conceito de caixa. Depois de ler este artigo e praticar os exercícios você deverá compreender o funcionamento das propriedades margin e padding.

Vamos utilizar a marcação abaixo. Nós temos um div dentro da outra e um parágrafo só para ilustrar o conteúdo.

<div class="externo">
    <div class="interno">
        <p>Eu sou o oconteúdo!</p>
    </div>
</div>

Passo 1

Podemos aplicar uma borda preta na div externa.

.externo {
    border: 1px solid black;
}

Passo 2

E agora uma borda vermelha para a div interna.

.interno {
    border: 1px solid red;
}

De tão próximo, as cores resultam num efeito interessante (ou esquisito).

Passo 3

Então vamos dar um espaçamento ? Podemos dar um padding de 10px em cada lado.

.interno {
    border: 1px solid red;
    padding: 10px 10px; /* atenção */
}

Bom, o conteúdo parece que ocupou mais espaço, não é mesmo ?

E as bordas continuam com aquele efeito engraçado.

Passo 4

Então vamos aplicar 10px no 4 cantos da margem da div interior.

.interno {
    border: 1px solid red;
    padding: 10px 10px;
    margin: 10px 10px; /* atenção */
}

Demos um respiro e, dessa forma, as bordas parecem fazer mais sentido.

O que você achou ?

Passo 5 (último)

Para terminar vamos aplicar uma cor da background.

.interno {
    border: 1px solid red;
    padding: 10px 10px;
    margin: 10px 10px;
    background-color: orange; /* atenção */
}

Exercícios

1. Abra o exercício e aplique cada passo apresentado neste artigo.
2. Veja na web imagens ilustrando o box model.