CSS Поля
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
CSS Margin - Поля
CSS свойство margin используется для создания пространства вокруг элементов вне любых определенных границ.
Из CSS у вас есть полный контроль над полями. Есть свойства для установки поля для каждой стороны элемента (сверху, справа, снизу и слева).
Поля - Отдельные стороны
CSS имеет свойства для указания полей для каждой стороны элемента:
margin-top- поле сверхуmargin-right- поле справаmargin-bottom- поле снизуmargin-left- поле слева
Все свойства полей могут иметь следующие значения:
- auto (автоматически) - браузер сам определяет края
- length (длина) - указывает на разницу в 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;
}
Попробуйте сами »
Значение auto
Вы можете установить для свойства margin значение auto чтобы горизонтально центрировать элемент в его контейнере, т.е. выровнять по центру.
Таким образом элемент займёт указанную ширину, а оставшееся пространство будет разделено поровну между левым и правым полями.
Пример
Используйте поле auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Попробуйте сами »
Значение inherit (наследования)
В этом примере показано, как левый край элемента <p class="ex1"> наследуется от родительского элемента (<div>):
Пример
Используйте значение inherit:
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> имеет нижнее поле 50 пикселей, а элемент <h2> имеет верхнее поле 20 пикселей.
Казалось бы, здравый смысл подсказывает, что вертикальная граница между <h1> и <h2> будет в общей сложности 70px (50px + 20px). Но из-за сворачивания полей фактическое поле в итоге составляет 50px.
Проверьте себя с помощью упражнений!
Все CSS свойства полей
| Свойство | Описание |
|---|---|
| margin | Сокращенное свойство для установки свойств полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Устанавливает левое поле элемента |
| margin-right | Устанавливает правое поле элемента |
| margin-top | Устанавливает верхнее поле элемента |