CSS margin

CSS Margin

CSS свойство margin используется для создания очищение пространства вокруг элемента.

Свойство margin устанавливает размер поля (вокруг элемента).

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

Margin - все стороны

В CSS есть свойства для указания разных сторон полей элемента и вокруг элемента отдельно:

• margin-top поле сверху
• margin-right поле справа
• margin-bottom поле снизу
• margin-left поле слева

Все свойства margin могут иметь следующие значения:

• auto - браузер вычисляет поля
• размер - полей измеряется в px, pt, cm и т.п.
• % - устанавливает маржу в процентах от ширины содержащего элемента
• inherit - устанавливает, что поля должно быть унаследовано от родительского элемента

Совет: Допускаются отрицательные значения.

Следующий пример устанавливает разные поля со всех четырех сторон элемента <p>:

Поля - сокращенное свойство

Чтобы сократить код, можно указать все свойства полей в одном свойстве.

Свойство margin сокращенное свойство для следующих индивидуальных свойств полей:

• margin-top поле сверху
• margin-right поле справа
• margin-bottom поле снизу
• margin-left поле слева

Вот как это работает:

Если, свойство margin имеет четыре значения:

• margin: 25px 50px 75px 100px;
  • поле сверху 25px
  • поле справа 50px
  • поле снизу 75px
  • поле слева 100px

Если, свойство margin имеет три значения:

• margin: 25px 50px 75px;
  • поле сверху 25px
  • поле справа и слева 50px
  • поле снизу 75px

Если, свойство margin имеет два значения:

• margin: 25px 50px;
  • поле сверху и снизу 25px
  • поле справа и слева 50px

Если, свойство margin имеет одно значения:

• margin: 25px;
  • поля со все четырех сторон 25px

Значение авто

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

Элемент примет положение указанной ширины, а остальное поле будет разделена поровну, между левым и правым полями:

Значение наследовать

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

Поля - разрушить

Верхнее и нижнее поле элемента, иногда бывают разрушены в единое поле, равной по величине из двух полей.

Что не произойдет с левым и правым полями! Только с верхним и нижним полями!

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

В примере выше, элемент <h2> имеет поле снизу 50px. Элемент <h3> имеет поле сверху 20px.

Здравый смысл предполагает, что вертикальное поле между элементами <h2> и <h3> может быть в общей сложности 70px (50px + 20px). Но в связи с разрушением поля по факту, поле будет в размере 50px

Все CSS свойства полей