Поля с отрицательными значениями

Отрицательные поля оказывают влияние на вертикальное форматирование и на то, как происходит сворачивание полей. Если среди сворачиваемых полей есть какие-то отрицательные значения, то из них броузер должен выбрать абсолютный максимум (максимум по модулю).Это абсолютное максимальное значение отрицательного поля вычитается из положительного значения поля. Иначе говоря, отрицательное значение добавляется к положительному, и полученное в результате значение и есть расстояние между элементами.

Обратите внимание на эффект «выталкивания» отрицательных верхнего и нижнего полей. На самом деле практически так же задание отрицательных значений для горизонтальных полей приводит к «выталкиванию» элемента за границы его родителя:

p.neg {margin-top: -50px; margin-right: 10px;
margin-left: 10px; margin-bottom: 0;
border: 3px solid gray;}

A paragraph.


A div.


Отрицательное верхнее поле просто вытолкнуло абзац вверх. Заметьте, что содержимое элемента div, который расположен в разметке следом за абзацем, также было поднято вверх на 50 пикселов.


При отрицательном нижнем поле абзац выглядит так, как будто он был вытолкнут вниз. Сравните следующую разметку с ситуацией:

p.neg {margin-bottom: -50px; margin-right: 10px;
margin-left: 10px; margin-top: 0;
border: 3px solid gray;}

A paragraph.




The next paragraph.



Элементы, следующие за div, размещаются в зависимости от положения нижней границы элемента div. Как видите, элемент div оканчивается выше визуального низа его дочернего абзаца. Следующий после div элемент находится на заданном расстоянии от низа div. Вот чего следует ожидать, применяя эти правила. Теперь рассмотрим пример, в котором поля последнего элемента, ненумерованного списка и абзаца сворачиваются. В этом случае ненумерованному списку и абзацу назначаются отрицательные поля:

li {margin-bottom: 20px;}
ul {margin-bottom: –15px;}
h1 {margin-top: –18px;}

Большее из двух отрицательных полей (–18px) добавляется к самому большому положительному полю (20px), что в результате дает 20px – 18px = 2px. Таким образом,между низом содержимого элемента списка и верхом содержимого h1 всего два пиксела.


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

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание