Вы столкнетесь со многими странными проблемами при верстке веб-страниц CSS. Эти проблемы могут быть вызваны ошибками браузера или недостаточным пониманием свойств CSS. В этой статье обсуждается проблема наложения полей CSS.
Слияние полей означает, что когда два вертикальных поля встречаются, они образуют одно поле. Высота объединенного поля равна большей из высот двух объединенных полей. Слияние (перекрытие) полей — довольно простая концепция. Однако когда дело доходит до практической компоновки веб-страниц, это может вызвать большую путаницу.
Когда элемент появляется над другим элементом, нижний внешний край первого элемента
Когда элемент содержится внутри другого элемента (при условии отсутствия отступов или границ, разделяющих поля), их верхние и/или нижние поля также объединяются. Пожалуйста, посмотрите на картинку ниже:
Хотя это может показаться странным, поля могут даже сливаться сами с собой.
Предположим, у вас есть пустой элемент с полями, но без рамки и отступов. В этом случае верхнее и нижнее поля объединяются и сливаются:
Если это поле встречается с полем другого элемента, оно также будет объединено:
Вот почему ряд элементов абзаца занимает очень мало места, поскольку все их поля сливаются вместе, образуя небольшое поле.
На первый взгляд объединение полей может показаться немного странным, но на практике оно имеет смысл. Возьмем, к примеру, типичную текстовую страницу, состоящую из нескольких абзацев. Пространство над первым абзацем равно верхнему полю абзаца. Без объединения полей поля между всеми последующими абзацами будут представлять собой сумму соседних верхних и нижних полей. Это означает, что пространство между абзацами в два раза больше верхней части страницы. Если происходит объединение полей, верхние и нижние поля между абзацами объединяются, чтобы расстояния везде были одинаковыми.
Объединение полей происходит только для вертикальных полей блоков в обычном потоке документов. Поля между встроенными, плавающими или абсолютно позиционированными блоками не объединяются.