Что такое margin css

Свойство margin

Свойство margin задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные – нет.

Например, вот документ с вертикальными и горизонтальными отступами:

Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative , при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

То есть, элемент продолжает полноценно участвовать в потоке.

Пример: вынос заголовка

Например, есть документ с информационными блоками:

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

CSS свойство margin

Универсальное свойство, которое позволяет устанавливать размер всех отступов элемента за одну декларацию. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Свойство margin может принимать от одного до четырех значений.

  • margin: 10px 5px 15px 20px;
  • верхний отступ 10px
  • правый отступ 5px
  • нижний отступ 15px
  • левый отступ 20px
  • верхний отступ 10px
  • правый и левый отступы 5px
  • нижний отступ 15px
  • верхний и нижний отступы 10px
  • правый и левый отступы 5px
  • все четыре отступа 10px

Внимание: Допускается использование отрицательных значений.

CSS синтаксис

Возможные значения

Значение Описание
auto Браузер автоматически устанавливает размер отступов.
размер Устанавливает размер отступов в единицах CSS — пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0.
% Устанавливает размер отступов в процентах от ширины родительского элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

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

Устанавливаем размер отступов параграфа со всех четырех сторон

Схлопывание отступов

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой.

Рассмотрим следующий пример:

Исходя из данного примера размер нижнего отступа элемента <h1> установлен в 30px, а размер верхнего отступа элемента <p> — в 20px.

Здавый смысл говорит, что вертикальный отступ между элементами <h1> и <p> должен быть 50px (30px + 20px). Однако из-за эффекта схлопывания в дейстительности это значение будет 30px.

Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.

margin

Свойство margin задает все свойства отступов в одной строке. Это свойство может иметь от одного до четырех значений.

Примеры:

* margin:10px 5px 15px 20px; — верхний отступ 10px — правый отступ 5px — нижний отступ 15px — левый отступ 20px

* margin:10px 5px 15px; — верхний отступ 10px — правый и левый отступы 5px — нижний отступ 15px

* margin:10px 5px; — верхний и нижний отступы 10px — правый и левый отступы 5px

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *