Иногда два поля сливаются в одно.
Верхние и нижние поля элементов иногда сворачиваются в одно. маржа, равная наибольшему из двух полей.
Этого не происходит на левом и правом полях! Только верхние и нижние поля!
Посмотрите на следующий пример:
Демонстрация краха маржи:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
В приведенном выше примере элемент <h1> имеет нижнее поле шириной 50 пикселей и <h2> элемент имеет верхнее поле размером 20 пикселей.
Здравый смысл, казалось бы, подсказывает, что вертикальное поле между <h1> и <h2> будет в общей сложности 70 пикселей (50 пикселей + 20 пикселей). Но из-за краха маржи, фактическое поле составляет 50 пикселей.
Сокращенное свойство для установки всех свойств полей в одном объявлении.
Устанавливает нижнее поле элемента
Устанавливает левое поле элемента
Устанавливает правое поле элемента
Устанавливает верхнее поле элемента