Внешние и внутренние отступы в CSS

В CSS есть два вида отступов - внешние и внутренние. Внутренние отступы - это расстояние от края контента до рамки блока. А внешние отступы - это расстояние от рамки блока до соседнего блока или до края страницы. Если рамки нет, то расстояние определяется от предполагаемой рамки. Для создания внешних отступов в CSS используется свойство margin, а для создания внутренних - свойство padding. В значениях этих свойств указывается расстояние в единицах, доступных в CSS.

Создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока.

Стиль:

7
8
9
10

div
  {
  border: 1px solid Red;
  }

HTML код:

14
15

<div style="padding: 30px; margin: 50px">Контент</div>
<div>Соседний блок</div>

Обратите внимание - второй блок, которому не установлены отступы, не касается краёв страницы, а находится от них на определённом расстоянии. Это происходит потому, что у тега <body> есть внутренние отступы. Их можно отменить, то есть, сделать равными нулю, как и у любого элемента.

ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей.

Отступы можно установить с каждой стороны по-отдельности. Для установки внешних отступов используются свойства margin-left, margin-right, margin-top, margin-bottom, а для внутренних отступов padding-left, padding-right, padding-top, padding-bottom.

Добавим на страницу блок и установим ему внутренние отступы сверху и слева:

16	<div style="padding-top: 10px; padding-left: 15px">Контент</div>

Попробуйте установить блоку различные внутренние и внешние отступы, посмотрите, как они работают.

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

сначала отступ сверху
затем справа
затем снизу
затем слева

Если какой-то отсуп не нужен, то ему можно указать нулевое значение.

Пример:

17	<div style="margin: 50px 10px 0 10px">Контент</div>