Верхние и нижние поля элементов накладываются друг на друга. Представим, что у нас есть три абзаца, следующих один за другим, к каждому из них относится следующее правило:
р {width:400px; height: 50px; border:1px solid #000; margin: 50px 0 30px 0; background-color:#CCC;}
Возможно, вы предположили, что общее расстояние между абзацами будет равно сумме нижнего поля предыдущего абзаца и верхнего поля последующего, то есть 80 пикселям в нашем случае, но это не так. Верхнее и нижнее поле накладываются друг на друга и общее расстояние между абзацами равно величине большего из этих двух полей, в нашем случае 50 пикселам.
Накладывание полей обеспечивает отступ первого абзаца, заголовка или элемента списка от содержащего его элемента для поддержания логической структуры документа. Для последующих однотипных элементов такое отделение уже не требуется, соответственно, надобности в двух полях нет, и они накладываются.