верхний элемент имеет нижний маржин равный 30px (margin-bottom:30px;)
нижний элемент имеет верхний маржин равный 20px (margin-top:20px;)
Естественно было бы рассчитывать, что расстояние между ними будет 50px, но...
Маржины не суммируются, а берется наибольшее значение из данных двух.
Внутри желтого дива помещаем внутренний див и верхний маржин у него равный 60px (margin-top:60px;)
Пусть имеется некий желтый див и верхний маржин у него равный 50px (margin-top:50px;)
Маржины не суммируются, а берется наибольшее значение из данных двух.