Схлопывание границ (margin collapsing) - это особенность CSS, при которой верхние и нижние отступы (margin) двух соседних элементов могут схлопнуться в один отступ. Это происходит, когда отступы двух элементов соприкасаются друг с другом и один из них больше другого.

Схлопывание границ происходит только между верхними и нижними отступами, горизонтальные отступы не схлопываются. Это значит, что если у двух соседних элементов есть горизонтальные отступы, то они не схлопнутся.

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

Чтобы избежать схлопывания границ, можно использовать один из следующих методов:

• Установить для отступов одинаковые значения для двух соседних элементов.
• Установить для верхнего или нижнего отступа значение свойства padding-top или padding-bottom для элемента.
• Создать промежуточный элемент между двумя элементами.

Назад