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:
