kwork banner 468x60kwork banner 728x90kwork banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe 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 пикселей доступного горизонтального пространства, а оставшееся пространство будет поровну разделено между левым и правым полями.

kwork banner 480x320kwork banner 728x90kwork banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox 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-свойство…

Руководство по фильтрам в CSS3

В этой главе мы обсудим эффекты свойства filter, представленные в CSS3, которые можно использовать для выполнения операций с визуальными эффектами, таких как размытие, балансировка контрастности, яркости, насыщенности цвета и т. д. над графическими элементами, такими как изображения, перед их отображением на веб-странице. Эффекты фильтра могут быть применены к элементу с помощью свойства filter, которое принимает…