|
||||||||||||
Меню сайта
Реклама на сайте:
|
Отступы и поля в CSS. Что такое margin и padding?Урок №8 Свойства margin и padding очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Для того чтобы устанавливать размер отступа одного HTML элемента от другого, в CSS существуют свойство margin и свойство padding. Margin – это промежуток снаружи элемента, а padding – внутри.В этом разделе речь пойдёт о полях (свойство margin) и отступах (свойство padding) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства. Давайте разберемся в этих понятиях. paddingОтступом (padding) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц. Единицами измерения могут быть пиксели (px) или процентное соотношение (%). Пример кода 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, которые устанавливают ширину отступов от каждой из границ элемента индивидуально.
Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля. Пример кода CSS: #block { margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */ } margin: Верхний отступ; Правый отступ; Отступ снизу; Отступ cлева. Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций. 1. Избегайте коротких, и уж тем более, нулевых отступов от содержимого к границам элемента, особенно это касается текстовых блоков.
Текст с маленькими полями и отступами читается трудно и "вязко".
Читайте также:
|