Освоение схлопывания отступов

Верхние и нижние отступы блоков иногда объединяются (схлопываются) в один отступ, размер которого равен самому большому из индивидуальных отступов (или только одному из них, если они равны), это поведение известно как схлопывание отступов. Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

Схлопывание отступов происходит в трех основных случаях:

Смежные элементы

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

Отсутствие содержимого, разделяющего родителя и потомков

Если нет границы, отступа, встроенного элемента, блочного контекста форматирования или очистки, разделяющих margin-top блока от margin-top одного или нескольких его дочерних блоков; или нет границы, отступа, встроенного содержимого, height или min-height, разделяющих margin-bottom блока от margin-bottom одного или нескольких его дочерних блоков, то эти отступы схлопываются. Схлопленный отступ оказывается за пределами родителя.

Пустые блоки

Если нет границы, отступа, встроенного содержимого, height или min-height, разделяющих margin-top блока от его margin-bottom, то его верхний и нижний отступы схлопываются.

Некоторые замечания:

• Более сложное схлопывание отступов (более двух отступов) происходит, когда вышеупомянутые случаи комбинируются.
• Эти правила применяются даже к нулевым отступам, поэтому отступ потомка оказывается за пределами его родителя (в соответствии с правилами выше) независимо от того, равен ли отступ родителя нулю.
• При наличии отрицательных отступов, размер схлопнувшегося отступа равен сумме наибольшего положительного отступа и самого маленького (самого отрицательного) отрицательного отступа.
• Если все отступы отрицательные, размер схлопнувшегося отступа равен самому маленькому (самого отрицательному) отступу. Это относится как к смежным элементам, так и к вложенным элементам.
• Схлопывание отступов имеет отношение только к вертикальному направлению.
• Отступы не схлопываются в контейнере с display равным flex или grid.

<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}