Опанування перекриття зовнішніх полів

Іноді верхній та нижній зовнішні поля блоків поєднуються (перекриваються) в один зовнішній відступ, чий розмір – найбільший розмір серед окремих полів (або просто один з них, якщо ці відступи – однакові), – це логіка, що зветься перекриттям зовнішніх полів. Зверніть увагу, що поля пливних та абсолютно позиціонованих елементів – ніколи не перекриваються.

Перекриття зовнішніх полів трапляється в трьох базових випадках:

Сусідні сестринські елементи

Зовнішні поля сусідніх сестринських елементів – перекриваються (окрім випадків, коли другий з нащадків потребує розчищення від пливних сусідів).

Жодний вміст не відділяє батьківський елемент від його нащадків

Якщо немає меж, внутрішніх відступів, рядкового вмісту, не створюється блоковий контекст форматування, не відбувається розчищення, що відділяло б margin-top блока від margin-top одного чи більше його блоків-нащадків; або коли немає меж, внутрішніх відступів, рядкового вмісту, height або min-height, котрі відділяли б margin-bottom блока від margin-bottom одного чи більше його блоків-нащадків, то такі зовнішні поля – перекриваються. Перекрите зовнішнє поле опиняється зовні батьківського елемента.

Порожні блоки

Якщо немає меж, внутрішніх відступів, рядкового вмісту, height або min-height, котрі відділяли б margin-top блока від його margin-bottom, то такі верхні й нижні зовнішні поля – перекриваються.

Кілька зауважень:

  • Коли кілька ситуацій, описаних вище, поєднуються, відбувається складніше перекриття зовнішніх відступів (перекриття більш ніж двох).
  • Ці правила застосовуються навіть до зовнішніх відступів, котрі є нульовими, тож зовнішнє поле нащадка може опинитися зовні його батьківського елемента (згідно з правилами вище), навіть якщо зовнішнє поле батьківського елемента – нульове.
  • Коли залучені від'ємні зовнішні поля, то розмір поля-перекриття – це сума найбільшого додатного поля та найменшого (в бік мінус нескінченності) від'ємного поля.
  • Коли всі зовнішні поля – від'ємні, то розмір поля-перекриття – найменше (в бік мінус нескінченності) зовнішнє поле. Це стосується і сусідніх елементів, і вкладених.
  • Перекриття зовнішніх полів стосується лише вертикальних полів.
  • Зовнішні поля не перекриваються в контейнері, котрий має властивість display зі значенням flex або grid.

Приклади

HTML

<p>Нижнє зовнішнє поле цього абзацу – перекривається …</p>
<p>
  … з верхнім зовнішнім полем цього абзацу, породжуючи зовнішнє поле
  <code>1.2rem</code> між ними.
</p>

<div>
  Цей батьківський елемент – містить два абзаци!
  <p>
    Цей абзац має зовнішній відступ <code>.4rem</code> між ним та текстом вище.
  </p>
  <p>
    Моє нижнє зовнішнє поле перекривається з полем батьківського елемента,
    породжуючи нижнє зовнішнє поле <code>2rem</code>.
  </p>
</div>

<p>Я знаходжусь на відстані <code>2rem</code> від елемента вище.</p>

CSS

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

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

Результат

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.