Внутренние отступы

Свойства блочных элементов

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

Блок текста обладает свойствами: высоты (height), ширины (width), границы (border), отступа (margin), набивки (padding), произвольного размещения (float), управления обтеканием (clear).

Ширина и высота блока текста они могут в типографских пунктах(pt), пикселях(px) и условных единицах(em):

<div style="width:200px;">пиксели</div>

<div style="width:200pt;">типографские пункты</div>

<div style="width:5em;">условные единицы</div>

Расстояние от границы блочного элемента до границы вложенного в него блочного элемента назыается padding. Для обозначения этого свойства может употребляться слово "набивка" или словосочетание "внутренний отступ".

Отступ от "набивки" внешнего блочного элемента до границы вложенного элемента называется margin. Для его обозначения мы будем употреблять термин "отступ" или словосочетание "внешний отступ".

Таким образом, padding и margin характеризуют отступы блочного элемента относительного начала его содержания и относительно границы охватывающего его элемента разметки соответственно:

Отступы и "набивка" могут быть левыми, правыми, верхними и нижними. CSS позволяет варьировать любые из них.

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

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

Таким образом, блок текста с точки зрения размещения на странице равноценен картинкам или прямоугольным областям приложений.

Ниже приведен пример применения padding (левый внутренний отступ текста в параграфе):

p { padding-left:100px;

text-align:left;

border-width:1px;

}

У блока существует четыре стороны. Соответственно padding может быть:

padding-left: левый внутренний отступ, который определяет расстояние от левого края блока до его содержания.

padding-right: правый внутренний отступ, который определяет расстояние от правого края блока до его содержания.

padding-top: верхний внутренний отступ, который определяет расстояние от верхнего края блока до его содержания.

padding-bottom: нижний внутренний отступ, который определяет расстояние от нижнего края блока до его содержания.

padding: определяет единый размер внутреннего отступа блока. Этот параметр задается в случае одинакового размера поля отступа от всех сторон блока.

Проиллюстрируем применение padding примером:

p { padding-left:100px;

padding-right:50px;

padding-top:20px;

padding-bottom:10px;

text-align:left;

border-width:1px;

}

Дата добавления: 2014-01-13