Отступы в CSS (margin и padding)

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором - внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

Для демонстрации отступа нам потребуется два блока div. Создадим их:

<div style="width: 200px;">
   <div style="height: 100px;"></div>
</div>

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

Как видно из примера, рамки совпадают, потому что нет отступов. Теперь сделаем внешний отступ в 10px для внутреннего, красного, элемента так:

<div style="width: 200px;">
   <div style="height: 100px; margin: 10px;"></div>
</div>

На странице браузера получится такой результат:

Существует возможность задать отступ для каждой стороны отдельно. Для этого используйте свойства:

• margin-left - отступ слева
• margin-right - отступ справа
• margin-top - отступ сверху
• margin-bottom - отступ снизу

Аналогично это можно сделать через свойство margin, передав ему сразу четыре значения. К примеру так: "margin: 10px 20px 30px 40px". В таком случае отступы будут: сверху - 10px, справа - 20px, снизу - 30px, сверху - 40px. попробуем это на практике:

<div style="width: 200px;">
   <div style="height: 100px; margin: 10px 20px 30px 40px;"></div>
</div>

Получится такой результат:

Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: "margin: 10px 20px". Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения "margin: 10px 20px 30px", то соответственно верхний отступ получится 10px, правый и левый - 20px, а нижний 20px.

Свойство margin может принимать ещё и значние "auto". Это значение центрирует элемент по горизонтали. Попробуем продемонстрировать эту центровку:

<div style="width: 200px;">
   <div style="width: 100px; height: 100px; margin: 10px auto;"></div>
</div>

В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:

Этот приём центрирования используется практически на всех сайтах, на которых контент расположен в центре экрана.

Внутренний отступ (padding)

Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)

<div style="
   width: 200px;
   text-align: justify;
   padding: 10px 30px 10px 20px;
">
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>

Результат будет таким: Существует возможность задать отступ для каждой стороны отдельно. Для этого используйте свойства:

• padding-left - отступ слева
• padding-right - отступ справа
• padding-top - отступ сверху
• padding-bottom - отступ снизу

Проблема расширения (box-sizing)

У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента "width: 200px;", но у одного установим свойство padding:

<div style="width: 200px;">
   Без отступа
</div>
<div style="width: 200px; padding: 10px 30px;">
   С отступом
</div>

В браузере получится такой результат:

Без отступа
С отступом

Оба элемента имеют одинаковую ширину "width: 200px;". Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):

<div style="width: 200px;">
   Без отступа
</div>
<div style="width: 200px; padding: 10px 30px; box-sizing: border-box;">
   С отступом
</div>

Тогда вместо того, чтобы раздвигать границы элемента, будет сужаться область внутри него.

Без отступа
С отступом