CSS Отступ снаружи
Этот элемент имеет поля снаружи со всех сторон 70 пикселей margin:70px;
.
CSS свойство 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
Использовать сокращенное свойство margin с одним значением:
p {
margin: 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 | Устанавливает верхнее поле элемента |