H5基础知识第七课时（CSS）_h5 margin-优快云博客

本文探讨了 CSS 中 margin 折叠现象及其解决办法，并提供了避免嵌套盒子中子盒子 margin 与父盒子重叠的具体方案。

1.margin折叠
结论： (1)垂直排放的盒子，垂直间距是合并的（取最大值）
(2)水平排放的盒子，水平间距是margin的累加
(3)margin折叠只发生在块级元素上；
(4)浮动元素的margin不与任何margin发生折叠；
(5)设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
(6)绝对定位元素的margin不与任何margin发生折叠；
(7)根元素的margin不与其它任何margin发生折叠；
2.嵌套盒子时子盒子margin与父盒子重叠问题
解决方式 (1)为父盒子添加 overflow：hidden
(2)为父盒子添加padding

(3)为父盒子添加border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套盒子</title>
    <style>
        #parent{
            width: 300px;
            height: 300px;
            background-color: #FF6600;
            overflow: hidden;
        }
        #child{
            width: 150px;
            height: 150px;
            background-color: #cccccc;
            margin: 0 auto;
            margin-top: 75px;
        }
    </style>
</head>
<body>

<div id="parent">
    <div id="child"></div>
</div>

</body>
</html>