Этот элемент имеет поля снаружи со всех сторон 70 пикселей margin:70px;.
Свойство margin
CSS свойство margin используется для создания очищение пространства вокруг элемента.
Свойство margin устанавливает размер поля (вокруг элемента).
В CSS с помощью свойства margin, вы имеете полный контроль над полями. В CSS есть свойства для установки полей с каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.
Поля - со всех сторон
В CSS есть свойства для указания разных сторон полей элемента и вокруг элемента отдельно:
margin-topполе сверхуmargin-rightполе справаmargin-bottomполе снизуmargin-leftполе слева
Все CSS свойства margin могут иметь следующие значения:
- auto - браузер вычисляет поля
- размер - полей измеряется в px, pt, cm и т.п.
- % - устанавливает маржу в процентах от ширины содержащего элемента
- inherit - устанавливает, что поля должно быть унаследовано от родительского элемента
Совет: Допускаются отрицательные значения.
Следующий пример устанавливает разные поля со всех четырех сторон элемента <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Попробуйте сами »
margin - сокращенное свойство
Чтобы сократить код, можно указать все свойства margin в одном свойстве.
Свойство margin сокращенное свойство для следующих индивидуальных свойств полей:
margin-topполе сверхуmargin-rightполе справаmargin-bottomполе снизуmargin-leftполе слева
p {
margin: 100px 150px 100px 80px;
}
Попробуйте сами »
Вот как это работает:
Если, свойство margin имеет четыре значения:
- margin: 25px 50px 75px 100px;
- поле сверху 25px
- поле справа 50px
- поле снизу 75px
- поле слева 100px
Использовать сокращенное свойство margin с четырьмя значениями:
p {
margin: 25px 50px 75px 100px;
}
Попробуйте сами »
Если, свойство margin имеет три значения:
- margin: 25px 50px 75px;
- поле сверху 25px
- поле справа и слева 50px
- поле снизу 75px
Использовать сокращенное свойство margin с тремя значениями:
p {
margin: 25px 50px 75px;
}
Попробуйте сами »
Если, свойство margin имеет два значения:
- margin: 25px 50px;
- поле сверху и снизу 25px
- поле справа и слева 50px
Использовать сокращенное свойство margin с двумя значениями:
p {
margin: 25px 50px;
}
Попробуйте сами »
Если, свойство margin имеет одно значения:
- margin: 25px;
- поля со все четырех сторон 25px
Значение auto
Вы можете установить для свойства margin значение auto элемент будет находится в центре внутри контейнера по горизонтали.
Элемент примет положение указанной ширины, а остальное поле будет разделена поровну, между левым и правым полями:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Попробуйте сами »
Значение inherit
Пример ниже позволяет полю слева, быть унаследованным от родительского элемента:
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
Попробуйте сами »
margin - разрушить
Верхнее и нижнее поле элемента, иногда бывают разрушены в единое поле, равной по величине из двух полей.
Что не произойдет с левым и правым полями! Только с верхним и нижним полями!
Посмотрите следующий пример:
h2 {
margin: 0 0 50px 0;
}
h3 {
margin: 20px 0 0 0;
}
Попробуйте сами »
В примере выше, элемент <h2> имеет поле снизу 50px. Элемент <h3> имеет поле сверху 20px.
Здравый смысл предполагает, что вертикальное поле между элементами <h2> и <h3> может быть в общей сложности 70px (50px + 20px). Но в связи с разрушением поля по факту, поле будет в размере 50px
Все CSS свойства margin
| Свойства | Описание |
|---|---|
| margin | Сокращенное свойство для установки свойств полей в одной декларации |
| margin-bottom | Устанавливает нижние поле элемента |
| margin-left | Устанавливает левое поле элемента |
| margin-right | Устанавливает правое поле элемента |
| margin-top | Устанавливает верхнее поле элемента |