Свойства PADDING и MARGIN и как их использовать

Сегодня мы поработаем над пониманием разницы между HTML padding(внутренний отступ) и margin(внешний отступ) в CSS. Но сначала разберемся с их синтаксисом. Существует пару методов написания данных свойств: обычный и сокращенный:

Свойства PADDING и MARGIN и как их использовать

Padding и Margin в CSS

Обычную форму записи рассматриваемых свойств проще понять, так как она похожа на все остальные стилевые записи:

Обычная запись:

padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

С другой стороны, сокращенная запись в CSS объединяет в себе все данные свойства в одно общее свойство «padding«.

Краткая запись:

padding: 10px 20px 40px 10px;

У padding и margin есть четыре значения: верхнее, правое, нижнее и левое. В сокращенной записи, показанной выше, так же задаются четыре значения, отделенных друг от друга пробелом. Первое из четырех значений отступ сверху, далее отступ справа, снизу(padding bottom HTML) и слева:

padding: TOP RIGHT BOTTOM LEFT;(padding: сверху справа снизу слева)

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. К примеру, если верхний отступ равен 30px, левый и правый по 10px, а нижний — 40px, то можно использовать следующую форму записи:

padding: 30px 10px 40px;

Сокращаем до двух значений!

Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px, а левый и правый отступы — по 20px. Наш CSS будет выглядеть следующим образом:

padding: TOP/BOTTOM RIGHT/LEFT;(padding: сверху/снизу справа/слева)padding: 10px 20px;

Только одно значение!

Наша последняя версия сокращенной записи для padding и margin HTML включает только одно значение. Эту запись можно легко использовать, когда все отступы(сверху, снизу, справа и слева) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px, то CSS выглядел бы следующим образом:

padding: 20px;

Совет!

Когда какой формат записи использовать? К примеру, если необходимо задать элементу только нижний отступ, я буду использовать обычную запись, поскольку необходимо применить свойство только к одной стороне: padding-bottom: 30px;

Как работать с PADDING и MARGIN

Между данными двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента. Margin используется для задания пространства вокруг внешней границы элементов.

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

Также можно без труда думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

Сейчас подумайте о margin как о невидимом силовом поле ввода вокруг вас. Силовое поле ввода ограждает иные вещи от вас. Возвращаясь к примеру с пальто и краской, если бы я бросил в вас краску, и она была бы в состоянии пройти через силовое поле ввода, то она по-прежнему покрыла бы только вас и пальто.

PADDING и MARGIN на примере веб-сайта

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца(тега <p>), далее добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome, чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding, который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

Свойства PADDING и MARGIN и как их использовать Сейчас добавим margin абзацу. Я добавлю отступ сверху и снизу 30px, а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина картинки стала меньше, так как margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin находится за пределами padding и темно-синий фон не распространяется на область margin:
Свойства PADDING и MARGIN и как их использовать Если вы до сих пор путаетесь, как использовать padding и margin HTML, то пришло время экспериментировать! Чем больше вы будете использовать свойства CSS, и изменять их значения, тем лучше поймете, как они работают.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *