Особенности полей в CSS.

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

У элементов могут быть поля, выраженные отрицательными значениями, и тогда элементы выходит за пределы содержащего его блока родительского элемента или перекрывается с другими элементами на странице как на примере изображения в сером блоке, где стиль поменяли так style="float:left; margin: -20px -20px":

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

Вертикальные поля не перекрываются в случае обтекаемых элементов, элементов с абсолютным позиционированием и элементов с внутристрочным блоком страниц сайта. В CSS 2.1 горизонтальные поля (левое и правое) никогда не перекрываются. Взять на заметку обязательно.

Перекрытие полей в CSS.

Верхнее и нижнее поля, примененные к незамененным внутристрочным (текстовым элементам, таким, как еm или strong), не влияют на высоту строки. Иными словами, верхнее и нижнее поля не считаются частью внутристрочного блока элемента или частью высоты соответствующего блока. Спервого раза вряд ли что-либо поймете, прочитывайте не раз.

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

Если поле есть у изображения, то наружный нижний край поля помещается на базовую линию текста (если только размещение не изменено при помощи свойства vertical-align элемента img. Это мы уже знаем, но все же.

обратно на главную     назад    дальше     вперед