CSS外边距合并现象
外边距合并（Margin Collapsing）是指在文档流中，两个或多个相邻元素的外边距（margin）会合并为一个外边距，其大小会取其中最大的外边距值
当两个相邻的兄弟元素之间没有其他内容（如边框、内边距、行内元素等）分隔时，它们的垂直外边距会发生合并
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>.one {width: 100px;height: 100px;background-color: brown;margin-bottom: 80px;}.two {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
</head>
<body><div class="one">one</div><div class="two"> two</div></body>
</html>
第一个 div元素的 margin - bottom 为 80px，第二个 div 元素的 margin - top 为 50px，最终它们之间的外边距会合并为 80px。