«Схлопывание» внешних отступов
Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px.
Этот эффект называется эффектом «схлопывания» внешних отступов или «схлопывания» маргинов.
Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с горизонтальными отступами 30px будет равен 60px.
«Выпадание» внешних отступов
«Выпадание» - это еще один эффект, связанный с вертикальными внешними отступами. Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.
Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим».
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху.
Внешние и внутренние отступы всегда складываются.