Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО MARGIN

Свойство margin устанавливает внешний отступ (поле) для каждой стороны элемента. Свойства margin-left, margin-top, margin-right и margin-bottom устанавливают поле для левой, верхней, правой и нижней стороны соответственно.

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

Поддержка браузеров

Синтаксис

margin: единицы измерения|проценты|auto|initial|inherit;
margin-left: единицы измерения|проценты|auto|initial|inherit;
margin-top: единицы измерения|проценты|auto|initial|inherit;
margin-right: единицы измерения|проценты|auto|initial|inherit;
margin-bottom: единицы измерения|проценты|auto|initial|inherit;

Значения свойства

Значение	Описание
единицы измерения	Определяет поле в px, pt, em и др. Значение по умолчанию равно 0. Допускаются отрицательные значения. Подробнее о единицах измерения в CSS.
проценты	Определяет поле в процентах от ширины родительского элемента.
auto	Браузер сам высчитывает значение.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="container">
    <div class="block block-1">Без поля</div>
</div>
<br>
<div class="container">
    <div class="block block-2">margin: 20px</div>
</div>
<br>
<div class="container">
    <div class="block block-3">margin: 10px 0 30px 45px</div>
</div>
<br>
<div class="container">
    <div class="block block-4">margin-left: 15px</div>
</div>
<br>
<div class="container">
    <div class="block block-5">margin-top: 25px</div>
</div>
<br>
<div class="container">
    <div class="block block-6">margin-right: 10px</div>
</div>
<br>
<div class="container">
    <div class="block block-7">margin-bottom: 10px</div>
</div>

HTML

.container {
  border: 1px solid black;
  margin-bottom: 30px;
  display: inline-block;
}

.block {
  width: 200px;
  background: #ddd;
  text-align: center;
}

.block-2 {
  margin: 20px
}

.block-3 {
  margin: 10px 0 30px 45px
}

.block-4 {
  margin-left: 15px
}

.block-5 {
  margin-top: 25px
}

.block-6 {
  margin-right: 10px
}

.block-7 {
  margin-bottom: 10px
}

CSS

← Перейти к списку свойств