Во втором блоке части разберём некоторые важные тонкости блочной модели. И начнём с внешних отступов (margin).

Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 50px, а второго 30px, то отступ между ними будет 50px:

Этот эффект называется эффектом «схлопывания» внешних отступов.

Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.