Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке «collapsing margins»?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Collapsing margins** - це ефект схлопування вертикальних `margin` у block-level елементів, коли замість суми береться найбільше значення (наприклад, 30px і 20px дають підсумкові 30px, а не 50px). **Ключове:** margins не схлопуються, якщо в елемента є `border`, `padding`, заданий `overflow` або він є flex чи grid контейнером.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Collapsing margins**, це ефект схлопування вертикальних `margin` у блоків, коли замість підсумовування береться **найбільше значення**, і підсумковий відступ стає спільним. Відбувається лише з **вертикальними** відступами (`margin-top` і `margin-bottom`) і лише в **block-level** елементів. --- ### **Коли margins схлопуються** 1. **Між двома сусідніми блоковими елементами** ```css div + div { /* margin-bottom першого і margin-top другого схлопнуться */ } ``` 2. **Між батьківським елементом і першим/останнім дочірнім елементом** (якщо в батьківського елемента немає `border`, `padding` або `overflow`) 3. **У порожнього блока** (якщо в ньому немає контенту, padding і border) --- ### **Як рахується підсумок** Якщо є два відступи: ```javascript margin-bottom: 30px margin-top: 20px ``` Підсумок буде **30px**, а не 50px. --- ### **Коли margins НЕ схлопуються** - якщо є `border` - якщо є `padding` - якщо задано `overflow: hidden | auto | scroll` - якщо елемент, flex або grid --- ### **Суть в одному реченні** **Collapsing margins, це механізм, за якого вертикальні margin двох блоків об'єднуються в один, що дорівнює максимальному.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.