Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы).

На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin.

Margin для отдельных сторон

Вы можете установить margin для отдельных сторон используя CSS-свойства margin-top, margin-right, margin-bottom, и margin-left соответственно. Посмотрим следующий пример, чтобы понять, как это работает:

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

Свойства margin могут быть указаны с использованием следующих значений:

• length — значение указанное в px, em, rem, pt, cm и т.д.;
• % — значение в процентах (%) от размера содержащего элемента;
• auto — браузер рассчитывает подходящий margin для использования;
• inherit — указывает, что размер должен быть унаследован от родительского элемента.

Вы также можете использовать отрицательные значения для элемента, например: margin: -10px;, margin: -5%;.

Сокращенное свойство margin

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

Давайте посмотрим на следующий пример, чтобы понять, как это свойство работает:

h1 {
    margin: 50px; /* apply to all four sides */
}
p {
    margin: 25px 75px; /* vertical | horizontal */
}
div {
    margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
    margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}

Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.

• Если указано одно значение, оно применяется ко всем четырем сторонам.
• Если указаны два значения, первое значение применяется к верхней и нижней части, а второе значение применяется к правой и левой стороне элемента.
• Если указано три значения, первое значение применяется к верхней, второе значение применяется к правой и левой стороне, а последнее значение применяется к нижней части.
• Если указано четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому краям поля элемента в указанном порядке.

Рекомендуется использовать сокращенные свойства, это поможет вам сэкономить время, избегая лишней типизации и упростив отслеживание и поддержку вашего CSS-кода.

Горизонтальное центрирование с Auto Margins

Значение auto для свойства margin указывает веб-браузеру автоматически рассчитывать отступы. Обычно это используется для центрирования элемента по горизонтали внутри большего контейнера.

Посмотрим следующий пример, чтобы понять, как это работает:

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

Приведенные выше правила позволяют элементу <div> занимать 300 пикселей доступного горизонтального пространства, а оставшееся пространство будет поровну разделено между левым и правым полями.