Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

The Box Model

16 de Novembro de 2010

Poderíamos assemelhar a criação de um layout à arquitetura de uma casa. Temos que delimitar os campos, pensando na altura e largura de cada cômodo. No nosso caso, temos que pensar na altura e largura de cada container, afim de não interpor em outro container.

O container é composto basicamemte por sua margem, borda, espaçamento, largura e altura. Se não definirmos estes atributos, eles são preenchidos automaticamente pelo padrão 0px. Com excessão, se seu pai tem um valor definido. Neste caso, ele herda o valor paterno.

Por exemplo, vamos criar a div conteudo.

#conteudo {
    margin:5px;
    border:1px;
    padding:5px;
    width:200px;
    height:200px;
}

Acima, definimos margin: 5px, ou seja, ele se afastará 5 pixels em todas as direções ao seu redor.
Também definimos border: 1px, ele terá uma borda no valor de 1 pixel.
Seu espaçamento, padding: 5px, tudo que estiver em seu interior respeitará 5 pixels de espaçamento.
E por último definimos width: 200px e height:200px, respectivamente largura de 200 pixels e altura também de 200 pixels.

A área total de largura da div conteudo tem 200px?

Não.

Pois a div têm 200px de largura + 2px de borda (1px da borda direita + 1px da borda esquerda) + 10px de espaçamento (5px de espaçamento da direita + 5px de espaçamento da esquerda) resultando em 212px.

Esta é a largura real: 212px.

Vamos visualizar, assim fica melhor:

© 2006 - 2017