São apenas caixas e quando você perceber isso, boa parte da complexidade do CSS será esclarecida.
Os principais elementos que definem as dimensões e distanciamento das caixas são: Width / Height, Padding, Border (e Box-shadow).
See the Pen 1c001ac59faa80bbcea6e78d73b8bd6d by André | Origamid (@origamid) on CodePen.
O Width e Height por padrão, são definidos como auto. Isso significa que eles se expandem de acordo com o conteúdo da caixa. O conteúdo geralmente é formado por textos ou imagens.
O Padding é considerado a margem interna da caixa. Ele cria um espaço negativo (espaço em branco / respiro) entre o conteúdo e a borda da caixa.
O Border define as bordas. Estas podem ser sólidas, duplas, pontilhadas e etc. Você pode definir a cor que quiser da borda.
Por padrão estes primeiros elementos somam para formar as dimensões finais da caixa. Então um elemento com 200px de width, 20px de padding para cada lado e 5px de border para cada lado, possui uma largura de 250px no total.
Esse comportamento padrão pode ser mudado, utilizando a propriedade box-sizing: border-box;. Com ela o padding e border ao invés de somarem, passam a diminuir o tamanho interno do conteúdo. Ou seja, a caixa vai ter sempre 200px de largura, porém a área interna disponível para conteúdo vai diminuir de acordo com o tamanho do padding e border.
O Margin é a margem externa e vai influenciar na relação da distância da caixa e os elementos em volta da mesma.
Esses 4 elementos juntos formam o que chamamos de Box Model, ou seja, modelo de caixa. As sombras não fazem parte do box-model, porém eu resolvi incluir nessa explicação pelos seguintes motivos:
O box-shadow é muito poderoso, ele vai muito além da criação de sombras apenas. Eu geralmente uso ele para criar bordas mais estilizadas, bordas duplas, que se cruzam e etc. Tudo isso é possível utilizando uma sombra sólida, ou seja, uma sombra que não se dispersa.
.sombra-solida {
box-shadow: 0 0 0 20px #84e;
}
O exemplo acima possui uma sombra sólida. Para criar elas basta manter o terceiro valor como 0.
As sombras funcionam de maneira diferente no box-model, elas não adicionam volume algum aos elementos. Se você tiver sombras maiores do que a distância entre um elemento e outro, estas irão ignorar os outros elementos e se posicionar acima ou abaixo dos mesmos (dependendo se este elemento vem antes ou após o outro).
Exemplo, se você tiver uma sombra sólida de 25px e margens de 10px, verá que 15px da sombra ficará por cima ou abaixo dos elementos próximos.