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