HTML, Excel, Word, SEOОсновы CSS3 ⇒ Параметры отступов

Основы CSS

Учебник CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры



Параметры отступов

В CSS3 отступы бывают двух видов - внутренние и внешние.

Внутренний отступ - расстояние между воображаемой границей веб-элемента и его содержимым.

Внешний отступ - расстояние между воображаемой границей веб-элемента и границей соседнего веб-элемента.

Лучше всего понять разницу между внутренним и внешним отступом можно на примере ячейки таблицы.

Внутренний отступ задается атрибутом стиля padding. Величину отступа можно задавать как в абсолютных единицах, так и в относительных. Значение auto задает нулевой отступ.

ПРИМЕР:

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%, т.е. он не поместится в окно браузера, в результате появится горизонтальная полоса прокрутки, что является плохим признаком веб-дизайна.



В начало страницы



В начало страницы