Маржа не отталкивает другую маржу

Question

У меня есть ряд таких элементов:

<h1>...</h1>
<p>.......</p>
<h1>...</h1>
<p>.......</p>
<!-- etc. -->

У меня есть верхнее поле в 5px на h1 и нижнее поле в 10px на p. Но итоговая маржа составляет всего 10px. И если я увеличу нижнюю границу до 50px, а верхнюю - до 40px, общая маржа составит всего 50px.

Общая маржа всегда равна самой большой марже. Зачем? И как я могу это исправить?

Answer 1

Поведение, которое вы видите, называется обвалом маржи, и это ожидаемое поведение.По сути, когда соприкасаются поля двух элементов уровня блока, они сворачиваются, и появляется только самый большой элемент.

Сужение полей между соседними элементами.Проще говоря, это означает, что для смежных вертикальных элементов уровня блока в обычном потоке документов будет учитываться только поле элемента с наибольшим значением поля, а поле элемента с меньшим значением поля будет свернуто доноль.

http://reference.sitepoint.com/css/collapsingmargins

Нет единого решения для этого - вы можете попробовать вместо этого использовать padding или просто увеличить поля с учетом этого.