"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




Отступы и поля в CSS. Что такое margin и padding?


папка digest

Урок №8

Свойства margin и padding очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают.

Для того чтобы устанавливать размер отступа одного HTML элемента от другого, в CSS существуют свойство margin и свойство padding.

Margin – это промежуток снаружи элемента, а padding – внутри.

В этом разделе речь пойдёт о полях (свойство margin) и отступах (свойство padding) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.

Давайте разберемся в этих понятиях.

padding

Отступом (padding) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц.
Содержимым может быть обычный текст, изображение или дочерний элемент, который так же может иметь свои поля.

Единицами измерения могут быть пиксели (px) или процентное соотношение (%).
auto - Размер полей и отступов автоматически рассчитывается браузером.

Пример кода CSS:

#block {
  padding: 16px; /* отступ от границ блока до содержания - со всех сторон будет 16 пикселей */
}

Свойство padding является универсальным, так как устанавливает поля от границ элемента до его содержимого для всех его сторон, oбъединяя таким образом в себе свойства padding-top, padding-right, padding-bottom и padding-left, которые задают ширину полей для каждой из сторон элемента индивидуально.

Пример кода CSS:

#block {
  padding-bottom: 30px; /* снизу поле 30 пикселей */
  padding-left: 20px; /* слева поле 20 пикселей */
}

Как видно из примера, если указывать таким образом поля с двух или трёх сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:

Пример кода CSS:

#block {
  padding: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */
}

padding: Верхний отступ; Правый отступ; Отступ снизу; Отступ cлева.


margin

Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементами. Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя.

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

Пример кода CSS:

#block {
  margin: 4px;
}

Свойство margin является универсальным, так как задает величину отступов от границ элемента для всех его сторон, объединяя таким образом в себе свойства margin-top, margin-right, margin-bottom и margin-left, которые устанавливают ширину отступов от каждой из границ элемента индивидуально.

Отступы (margin) располагаются за пределами блока, в то время как поля (padding) внутри его. Вследствие этого, фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского) блока или фон страницы.

Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля.

Пример кода CSS:

#block {
  margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */
}

margin: Верхний отступ; Правый отступ; Отступ снизу; Отступ cлева.


Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций.

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

2. Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.

3. Один из способов акцентирования внимания посетителя страницы на нужном Вам месте - это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к "особым" местам в тексте.

Следующий урок будет посвящён выравниванию текста в CSS

 



Создано|Обновлено: 31.05.2020.