Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 59 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Рис. 33
В данном случае для параграфа использовалось следующее описание стиля:
P{margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom: 50px; padding:0px;text-align:left; }
Нужно иметь в виду, что браузеры могут отображать эти параметры по-разному.
Если размер всех внешних отступов одинаковый, то можно просто воспользоваться атрибутом margin:
P { margin:5px; }
При применении внешнего отступа следует помнить, что он отсчитывается от границы элемента до границы внутреннего отсту-
па ("набивки", padding) охватывающего элемента. Если этот факт не учитывать, то общая ширина видимых полей может оказаться
больше, чем указано во внешнем отступе.
3.7. НАБИВКА (PADDING)
Текст внутри блока начинается не от самой его границы. Между границей и содержанием блока есть свободное про-
странство. Оно называется внутренний отступ текстового блока или padding. Совместно с внешним отступом (margin) тек-
стового блока padding образует общее поле отступа от границы охватывающего блок элемента разметки.
Padding можно проиллюстрировать на примере левого внутреннего отступа текста в параграфе (рис. 34).
Рис. 34
Для этого примера при описании параграфа использовался стиль:
P { padding-left:100px;text-align:left; border-width:1px; }
У блока текста существует четыре стороны. Соответственно различают:
padding-left – левый внутренний отступ, который определяет расстояние от левого края блока до его содержания;
padding-right – правый внутренний отступ, который определяет расстояние от правого края блока до его содержания;
padding-top – верхний внутренний отступ, который определяет расстояние от верхнего края блока до его содержания;
padding-bottom – нижний внутренний отступ, который определяет расстояние от нижнего края блока до его содержания;
padding – определяет единый размер внутреннего отступа блока. Этот параметр задается в случае одинакового размера
отступа от всех сторон блока. Также в этом элементе возможна группировка значений. При этом значения указываются в
следующем порядке:
– если указано одно значение, то оно присваивается сразу всем отступам;
– если указаны два значения, то первое присваивается верхнему и нижнему отступу, а второе – левому и правому;
– если указаны три значения, то первое значение присваивается верхнему отступу, второе – левому и правому, третье –
нижнему.
Проиллюстрируем применение padding на примере (рис. 35):
P { padding-left:100px;padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left;border-width:1px; }
Рис. 35

Страницы