CSS Margins - внешние отступы
Поля CSS
Свойства CSS margin используются для создания пространства вокруг элементов вне любых определенных границ.
С помощью CSS вы имеете полный контроль над полями. Существуют свойства для настройки поля для каждой стороны элемента (сверху, справа, снизу и слева).
Маржа-отдельные стороны
CSS имеет свойства для указания поля для каждой стороны элемента:
margin-topmargin-rightmargin-bottommargin-left
Все свойства полей могут иметь следующие значения:
- Auto-обозреватель вычисляет маржу
- length — определяет поле в пикселах, PT, cm и т. д.
- % — задает поле в% от ширины содержащего элемента
- Наследование-указывает, что поле должно быть унаследовано от родительского элемента
Совет: Допустимы отрицательные значения.
В следующем примере устанавливаются различные поля для всех четырех сторон элемента <p>:
Пример
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Маржа-Сокращенное свойство
Чтобы сократить код, можно указать все свойства полей в одном свойстве.
Свойство margin является сокращенным свойством для следующих свойств отдельных полей:
margin-topmargin-rightmargin-bottommargin-left
Итак, вот как это работает:
Если свойство margin имеет четыре значения:
- margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
Пример
p {
margin: 25px 50px 75px 100px;
}
Если свойство margin имеет три значения:
- margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
Пример
p {
margin: 25px 50px 75px;
}
Если свойство margin имеет два значения:
- margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
Пример
p {
margin: 25px 50px;
}
Если свойство margin имеет одно значение:
- margin: 25px;
- all four margins are 25px
Пример
p {
margin: 25px;
}
Значение Auto
Можно задать для свойства Margin значение auto для горизонтального центрирования элемента в его контейнере.
Затем элемент будет занимать заданную ширину, а оставшееся пространство будет равномерно распределено между левым и правым полями:
Пример
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Наследуемое значение
В этом примере левое поле элемента <p class = "EX1"> наследуется от родительского элемента (<div>):
Пример
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}
Свернуть маржи
Верхние и нижние поля элементов иногда сворачиваются в одно поле, равное самому большому из двух полей.
Это не происходит на левом и правом полях! Только верхние и нижние поля!
Посмотрите на следующий пример:
Пример
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
В приведенном выше примере элемент <H1> имеет нижнее поле 50px, а элемент <H2> имеет верхний предел, установленный в 20px.
Здравый смысл, казалось бы предположить, что вертикальное поле между <H1> и <H2> будет в общей сложности 70px (50px + 20px). Но из-за краха маржи, фактические маржа заканчивается время 50px.
Все свойства полей CSS
| Свойство | Описание |
|---|---|
| margin | Сокращенное свойство для задания свойств полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Задает левое поле элемента |
| margin-right | Задает правое поле элемента |
| margin-top | Задание верхнего поля элемента |