CSS Margin - Поля (внешние отступы)
CSS Поля
CSS свойства margin используются для создания пространства вокруг элементов за пределами любых определенных границ (внешних отступов).
Благодаря CSS у вас есть полный контроль над полями. Есть свойства для установки поля для каждой стороны элемента (вверху, справа, внизу и слева).
Margin - Отдельные стороны
CSS имеет свойства для указания поля для каждой стороны элемента:
margin-topmargin-rightmargin-bottommargin-left
Все свойства полей могут иметь следующие значения:
- auto - браузер вычисляет margin
- length - указывает поле в пикселях, pt, см и т.д.
- % - указывает поле в % от ширины содержащего элемента
- inherit - указывает, что поле должно быть унаследовано от родительского элемента
Совет: Отрицательные значения допускаются.
Пример
Установите разные поля для всех четырех сторон элемента <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Попробуйте сами »
Margin - Сокращенное свойство
Чтобы сократить код, можно указать все свойства полей в одном свойстве.
Свойство margin является сокращенным свойством для следующих индивидуальных свойств полей:
margin-topmargin-rightmargin-bottommargin-left
Итак, вот как это работает:
Если свойство margin имеет четыре значения:
- margin: 25px 50px 75px 100px;
- верхнее поле 25px
- правое поле 50px
- нижнее поле 75px
- левое поле 100px
Пример
Используйте сокращенное свойство поля с четырьмя значениями:
p {
margin: 25px 50px 75px 100px;
}
Попробуйте сами »
Если свойство margin имеет три значения:
- margin: 25px 50px 75px;
- верхнее поле 25px
- правое и левое поля 50px
- нижнее поле 75px
Пример
Используйте сокращенное свойство поля с тремя значениями:
p {
margin: 25px 50px 75px;
}
Попробуйте сами »
Если свойство margin имеет два значения:
- margin: 25px 50px;
- верхнее и нижнее поля 25px
- правое и левое поля 50px
Пример
Используйте сокращенное свойство поля с двумя значениями:
p {
margin: 25px 50px;
}
Попробуйте сами »
Если свойство margin имеет одно значение:
- margin: 25px;
- все четыре поля 25px
Пример
Используйте сокращенное свойство поля с одним значением:
p {
margin: 25px;
}
Попробуйте сами »
Значение auto
Вы можете установить для свойства поля значение auto чтобы горизонтально центрировать элемент в его контейнере.
При этом элемент займёт указанную ширину, а оставшееся пространство будет разделено поровну между левым и правым полями.
Пример
Используйте margin: auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Попробуйте сами »
Значение inherit
В этом примере левое поле элемента <p class="ex1"> унаследует от родительского элемента (<div>):
Пример
Использование наследуемого значения:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}
Попробуйте сами »
