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