Поля, границы, отступы. Часть 1

Web-страницы рассматриваются браузером как страницы состоящие из блоков: текстовые абзацы, изображения, списки, таблицы. Каждый блок окружают следующие свойства:

• padding – отступ между содержимым и границей блока;
• margin – поле отделяющее один блок от другого;
• border – линия вдоль каждого края блока;
• background-color – цвет фона блока.

Любое из этих свойств можно применять к блокам по отдельности, группами или все вместе.

Управление полями и отступами

Управлять полями или отступами каждого отдельного элемента независимо можно при помощи четырёх свойств регулирующие соответствующие поля с каждой стороны элемента: margin-top, margin-right, margin-bottom и margin-left. Аналогично с отступами: padding-top, padding-right, padding-bottom и padding-left. Можно использовать любые единицы измерения, принятые в языке CSS (пиксели, em, проценты).

Чтобы удалить все пространство полей и отступов, используйте свойства со значением 0 (например, margin-top: 0 или padding-bottom: 0). Чтобы убрать все дополнительное пустое пространство с четырех сторон окна браузера, нужно присвоить свойствам margin и padding нулевые значения: margin: 0; padding: 0;.

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

Сокращённая запись полей и отступов

В CSS существует возможность задавать поля и отступы сразу для всех четырёх сторон блока через одно свойство.

margin: 4px, 6px, 35px, 1px; - значения идут по часовой стрелки начиная сверху (сверху, справа, снизу, слева), такой же порядок и для отступов.

Если нужно применить одинаковое значение свойства поля или отступа сверху и снизу элемента, и одно и то же значение для левого и правого края, можно указать два значения. Так, объявление margin: 0 2em; удаляет верхнее и нижнее поля, а левое и правое поля устанавливает равными 2 em.

Точно так же, если верхние и нижние поля (или отступы) изменяются, а правые и левые остаются прежними, можно воспользоваться тремя значениями. Например, объявление margin: 0 2em 1em; установит верхнее поле равным 0, левое и правое — равными 2 em, а нижнее поле — 1 em.

Конфликты полей

В случае, когда блоки соприкасаются друг с другом и для них установлены поля смежных сторон, то браузер будет не объединять такие поля, а выбирать из них большее. Например, у одного блока нижнее поле: 20px, а верхнее поле второго блока: 40px, расстояние между ними будет не 60px, а 40px.