Мы используем файлы cookie
Мы используем файлы cookie для улучшения работы сайта и предоставления вам персонализированного опыта. Правила использования файлов cookie можно найти в нашей политике конфиденциальности
Схлопывание отступов (margin collapsing) — это механизм в CSS, при котором вертикальные отступы двух или более соседних блочных элементов, а также родителя и первого/последнего дочернего элемента, не складываются, а схлопываются в один отступ, равный наибольшему из них.
Схлопывание происходит в следующих случаях:
margin-bottom одного элемента и margin-top следующего элемента.margin-top родителя и margin-top первого потомка; margin-bottom родителя и margin-bottom последнего потомка. Происходит, если между ними нет границы (border), отбивки (padding), встроенного (inline) содержимого или если родитель не является flex/grid контейнером.margin-top элемента и его же margin-bottom, если у него нет содержимого, границы или отбивки.Пример соседних элементов:
htmlВ этом случае расстояние между элементами будет 30px, а не 50px.
Пример родитель и первый дочерний элемент:
htmlРасстояние о
Схлопывание отступов (margin collapsing) — это механизм в CSS, при котором вертикальные отступы двух или более соседних блочных элементов, а также родителя и первого/последнего дочернего элемента, не складываются, а схлопываются в один отступ, равный наибольшему из них.
Схлопывание происходит в следующих случаях:
margin-bottom одного элемента и margin-top следующего элемента.margin-top родителя и margin-top первого потомка; margin-bottom родителя и margin-bottom последнего потомка. Происходит, если между ними нет границы (border), отбивки (padding), встроенного (inline) содержимого или если родитель не является flex/grid контейнером.margin-top элемента и его же margin-bottom, если у него нет содержимого, границы или отбивки.Пример соседних элементов:
htmlВ этом случае расстояние между элементами будет 30px, а не 50px.
Пример родитель и первый дочерний элемент:
htmlРасстояние о
Зарегистрируйтесь или войдите, чтобы получить доступ к полным ответам на все вопросы из банка вопросов.