Свойство margin

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
+	+	+	+

Для чего используется?

Свойство формирует внешние отступы во всех направлениях. Внешним отступом считается пространство от соседнего или родительского элемента до границы. Также этот оператор имеет возможность установки своего отступа для каждой стороны отдельно.

Как правильно задавать?

margin:параметр отступов;

Какие могут быть значения?

В зависимости от того, сколько сторон будет с разными отступами, возможно задавать от одного значения до четырех:

Одно значение - не требуется указание отступа для других сторон, так как все они равнозначны.
Два значения - первое управляет верхним и нижним отступом, а второе - правым и левым.
Три значения - в этом случае первое значение отвечает за интервал вверху, второе - правый и левый, а третий - соответственно, нижний отступ.
Четыре значения - каждое из них соответствует каждой стороне, начиная с верхней и по часовой стрелке.

Единицы измерения указанного отступа могут быть в любыми, которые поддерживается в CSS. Возможно применение параметров со знаком минус.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство margin</title>
  <style>
   body {
    margin: 0;
   }
   .block1 {
    margin: 50px auto;
	display:block;
	width:250px;
    background: #b04d4d;
    padding: 10px;
   }
   .block2 {
    border: 2px solid #eee;
    padding: 10px;
    margin: 10px;
   }
  </style>
 </head>
 <body>
  <div class="block1">
   <div class="block2">
    Текст для примера блока, к которому присваивается
 внешний отступ. Блоку задан задний фон, рамки и центровка.
   </div>
  </div>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Отступы