etxt banner 468x60etxt banner 728x90etxt banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

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 пикселей доступного горизонтального пространства, а оставшееся пространство будет поровну разделено между левым и правым полями.

smsc banner 480x320smsc banner 728x90smsc banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

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

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по выравниванию элементов в CSS

Текст внутри блочных элементов можно выровнять, правильно настроив выравнивание текста с помощью text-align. Смотрите Руководство по форматированию текста в CSS, чтобы узнать больше о форматировании текста. Выравнивание по центру с помощью auto margin Выравнивание по центру блочного элемента является одним из наиболее важных следствий CSS-свойства margin. Например, контейнер <div> можно выровнять по центру по горизонтали,…