CSS поля
Поля используются для создания пространства вокруг элементов за пределами любых определенных границ.
CSS поля
Свойства CSS margin
используются для создания пространства вокруг элементов за пределами любых определенных границ.
С CSS у вас есть полный контроль над полями. Существуют свойства для установки полей для каждой стороны элемента (сверху, справа, снизу и слева).
Поле — отдельные стороны
В CSS есть свойства для указания поля для каждой стороны элемента:
margin-top
margin-right
margin-bottom
margin-left
Все свойства поля могут иметь следующие значения:
- 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
свойство имеет четыре значения:
- поля: 25px 50px 75px 100px;
- верхнее поле 25px
- правое поле 50px
- нижнее поле 75px
- левое поле 100px
Пример
Используйте сокращенное свойство margin с четырьмя значениями:
p {
margin: 25px 50px 75px 100px;
}
Если margin
свойство имеет три значения:
- поля: 25px 50px 75px;
- верхнее поле 25px
- правое и левое поля 50px
- нижнее поле 75px
Пример
Используйте сокращенное свойство margin с тремя значениями:
p {
margin: 25px 50px 75px;
}
Если margin
свойство имеет два значения:
- поля: 25px 50px;
- верхнее и нижнее поля 25px
- правое и левое поля 50px
Пример
Используйте сокращенное свойство margin с двумя значениями:
p {
margin: 25px 50px;
}
Если margin
свойство имеет одно значение:
- поле: 25 пикселей;
- все четыре поля 25px
Пример
Используйте сокращенное свойство margin с одним значением:
p {
margin: 25px;
}
Автоматическое значение
Вы можете установить свойство 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;
}