CSS Margin Collapse - Свёртывание полей
Margin Collapse - Свёртывание полей
Верхнее и нижнее поля элементов иногда сворачиваются в одно поле, равное наибольшему из двух полей.
Этого не происходит с левым и правым полями! Только верхнее и нижнее поля!
Посмотрите на следующий пример:
Пример
Демонстрация свёртывания полей:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Попробуйте сами »
В приведенном выше примере элемент <h1> имеет нижнее поле 50 пикселей, а элемент <h2> имеет верхнее поле 20 пикселей.
Здравый смысл подсказывает, что вертикальное поле между тегами <h1> и <h2> будет всего 70 пикселей (50 пикселей + 20 пикселей). Но из-за свёртывания полей фактическое поле составляет 50 пикселей.
Проверьте себя с помощью упражнений!
Все CSS свойства полей
| Свойство | Описание |
|---|---|
| margin | Сокращенное свойство для установки свойств полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Устанавливает левое поле элемента |
| margin-right | Устанавливает правое поле элемента |
| margin-top | Устанавливает верхнее поле элемента |
