Набивання (padding)

Текст всередині блоку починається не від самої його межі. Між кордоном і змістом блоку є вільний простір. Воно називається внутрішній відступ текстового блоку або padding. Спільно із зовнішнім відступом (margin) текстового блоку padding утворює спільне поле відступу від кордону охоплює блок елемента розмітки.

Padding можна проілюструвати на прикладі лівого внутрішнього відступу тексту в параграфі:

Рис. 9.7.

Для цього прикладу при описі параграфа використовувався стиль:

P {padding-left: 100px; text-align: left;

   border-width: 1px;}

Щоб браузер правильно відображав стилі, не слід розміщувати опис стилю на декількох рядках, як це зроблено в прикладі.

У блоку тексту існує чотири сторони. Відповідно, padding може бути:

padding-left - лівий внутрішній відступ, який визначає відстань від лівого краю блоку до його змісту;

padding-right - правий внутрішній відступ, який визначає відстань від правого краю блоку до його змісту;

padding-top - верхній внутрішній відступ, який визначає відстань від верхнього краю блоку до його змісту;

padding-bottom - нижній внутрішній відступ, який визначає відстань від нижнього краю блоку до його змісту;

padding - визначає єдиний розмір внутрішнього відступу блоку. Цей параметр задається в разі однакового розміру відступу від усіх сторін блоку.

Проілюструємо застосування padding на прикладі:

Рис. 9.8.

P {padding-left: 100px; padding-right: 50px;

   padding-top: 20px; padding-bottom: 10px;

   text-align: left; border-width: 1px;}

При установці padding слід пам'ятати, що цей параметр задає розмір відступу від кордону блоку до кордону зовнішнього відступу (margin) змісту блоку. З цієї причини загальний розмір поля може виявитися більше, ніж задано в параметрі padding.