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

UptoLike

ВУЗ: 

ТГТУ | Тамбов

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

Рубрика: 

Рис. 31
Отступы и "набивка" могут быть левыми, правыми, верхними и нижними. CSS позволяет изменять любые из них.
При отображении блока текста можно показать его видимую границу. CSS позволяет определить ее стиль, ширину и
цвет. При применении видимой границы следует учитывать специфику браузеров. Одним из осмысленных способов приме-
нения границы является видимое ограничение "плавающих" блоков текста.
"Плавающий" текстовый блок позволяет реализовать возможность обтекания этого блока текстом.
Обтекание одного текста другим происходит в том же самом ключе, что и обтекание текстом картинки или таблицы. Текст
охватывающего блока стремится втиснуться в свободное место, оставленное "плавающим" блоком. Когда граница "плавающе-
го" блока кончается, охватывающий блок распространяется на всю ширину отведенного для текста пространства.
Таким образом, блок текста с точки зрения размещения на странице равноценен картинкам или прямоугольным облас-
тям приложений.
3.6. ОТСТУПЫ (MARGIN)
При отображении блока текста на листе бумаги вокруг него обычно оставляют поля. Поля есть и в ученических тетра-
дях, и в больших серьезных книгах. Поля можно задавать либо относительно границы страницы, либо относительно самого
блока текста. В первом случае мы имеем дело с "набивкой" (padding), а во втором – с отступом (margin). Собственно, ширина
поля будет определяться суммой ширины "набивки" и ширины отступа (рис. 32).
Рис. 32
Обычно пунктирная линия и граница блока являются невидимыми линиями. Они угадываются по выровненному краю
текста. Вернее угадывается суммарная ширина полей. Стрелки указывают направление отсчета отступа. Padding отсчитыва-
ется от внешней границы блока внутрь блока, в то время как margin – от внешней границы блока в область охватывающего
его блока (наружу).
Внешний отступ (margin) может отсчитываться по любому направлению относительно сторон блока:
margin-left – левый внешний отступ. Определяет расстояние от левой границы блока текста до левой границы внутрен-
него отступа ("набивки", padding) охватывающего элемента;
margin-right – правый внешний отступ. Определяет расстояние от правой границы блока текста до правой границы
внутреннего отступа ("набивки", padding) охватывающего элемента;
margin-top – верхний внешний отступ. Определяет расстояние от верхней границы блока текста до верхней границы
внутреннего отступа ("набивки", padding) охватывающего элемента;
margin-bottom – нижний внешний отступ. Определяет расстояние от нижней границы блока текста до нижней границы
внутреннего отступа ("набивки", padding) охватывающего элемента;
margin – задает общий внешний отступ от всех сторон блока текста. Применяется в том случае, если блок текста равно-
удален от всех границ внутреннего отступа охватывающего элемента. Также в этом элементе возможна группировка значе-
ний. При этом значения указываются в следующем порядке:
– если указано одно значение, то оно присваивается сразу всем полям;
– если указаны два значения, то первое присваивается верхнему и нижнему полю, а второе – левому и правому;
– если указаны три значения, то первое значение присваивается верхнему полю, второе – левому и правому, третье –
нижнему.
Графически эти отступы можно представить следующим образом (рис. 33).

Страницы