Відступи (margin)

При відображенні блоку тексту на папері навколо нього зазвичай залишають поля. Поля можна ставити або щодо межі сторінки, або щодо самого блоку тексту. У першому випадку ми маємо справу з "відступом" (margin), а в другому - з набиванням (padding). Власне, ширина поля буде визначатися сумою ширини "набивання" і ширини відступу:

Рис. 9.5.

Зазвичай пунктирна лінія і кордон блоку є невидимими лініями. Вони вгадуються по вирівнюються краю тексту. Вірніше, вгадується сумарна ширина полів. Стрілки вказують напрям відліку відступу. Padding відраховується від зовнішнього кордону блоку всередину блоку, в той час як margin - від зовнішнього кордону блоку в область охоплює його блоку (назовні).

Зовнішній відступ (margin) може відраховуватися з будь-якого напрямку щодо сторін блоку:

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

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

margin-top - верхній зовнішній відступ. Визначає відстань від верхньої границі блоку тексту до верхньої межі внутрішнього відступу ("набивання", padding) охоплює елемента;

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

margin - задає загальний зовнішній відступ від усіх сторін блоку тексту. Застосовується в тому випадку, якщо блок тексту рівновіддалений від усіх кордонів внутрішнього відступу охоплює елемента.

Графічно ці відступи можна представити наступним чином:

Рис. 9.6.

У даному випадку для параграфа використовувалося наступне опис стилю:

P {margin-left: 50px; margin-right: 5px;

   margin-top: 15px; margin-bottom: 50px;

   padding: 0px; text-align: left;}

       

Потрібно мати на увазі, що браузери можуть відображати ці параметри по-різному.

Якщо розмір усіх зовнішніх відступів однаковий, то можна просто скористатися атрибутом margin:

P {margin: 5px;}

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

Набивання (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.