Параметры отступов
В CSS3 отступы бывают двух видов - внутренние и внешние.
Внутренний отступ - расстояние между воображаемой границей веб-элемента и его содержимым.
Внешний отступ - расстояние между воображаемой границей веб-элемента и границей соседнего веб-элемента.
Лучше всего понять разницу между внутренним и внешним отступом можно на примере ячейки таблицы.
- Внутренний отступ - это расстояние между границей ячейки и ее содержимым.
- Внешний отступ - это расстояние между двумя соседними ячейками.
Внутренний отступ задается атрибутом стиля padding. Величину отступа можно задавать как в абсолютных единицах, так и в относительных. Значение auto задает нулевой отступ.
- padding-left - внутренний отступ слева;
- padding-top - внутренний отступ сверху;
- padding-right - внутренний отступ справа;
- padding-bottom - внутренний отступ снизу.
ПРИМЕР:
P { padding-left: 4px; padding-top: 2px } |
Атрибут стиля padding указывает внутренние отступы со всех сторон веб-элемента:
padding: <indent 1>[<indent 2>[<indent 3>[<indent 4>]]]
ПРИМЕР:
.class1 {padding: 1px 1px 1px 1px} - первое значение задает внутренний отступ сверху; второе - справа; третье - снизу; четвертое - слева; .class2 {padding: 1px 1px 1px} - первое значение задает внутренний отступ сверху; второе - слева и справа; третье - снизу; .class3 {padding: 1px 1px} - первое значение задает внутренний отступ сверху и снизу; второе - слева и справа; .class4 {padding: 1px} - единственное значение задает отступ со всех сторон веб-элемента. |
Внешние отступы задаются атрибутом стиля margin, значения которого полностью идентичны padding.
Единственное отличие margin от padding заключается в том, что в качестве значений внешних отступов можно задавать отрицательные величины.
ПРИМЕР:
OL {margin-top: -5px} |
В данном примере браузер убирает отступы сверху, которые были заданы по умолчанию.
Надо иметь ввиду, что атрибуты стиля margin-left; margin-top; margin-right; margin-bottom; margin не действуют для задания внешних отступов у ячеек таблиц. Для этих целей следует применять атрибут стия border-spacing, о котором будет рассказано позже.
Работая с отступами надо быть очень внимательным, поскольку, они увеличивают размеры элемента html-страницы, к которому применяются. Если отступы заданы для блочных элементов html-страницы, которые формируют дизайн html-страницы, то должны быть изменены и размеры этих элементов, в противном случае дизайн страницы может быть нарушен.
Веб-дизайнер должен быть очень внимательным, если он применяет отступы для веб-элементов, размеры которых задаются в относительных величинах. Дело в том, что браузер в первую очередь вычисляет абсолютный размер элемента, а после этого добавляет к нему величины отступов. В результате таких действий браузера, размеры элемента становятся больше, чем были заданы изначально. Если это касается элемента, ширина которого составляет 100%, то после добавления к нему отступов, ширина элемента станет более 100%, т.е. он не поместится в окно браузера, в результате появится горизонтальная полоса прокрутки, что является плохим признаком веб-дизайна.