外边距折叠问题

最新推荐文章于 2025-12-08 09:18:56 发布

原创最新推荐文章于 2025-12-08 09:18:56 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

折叠外边距的大小，等于相邻边距中的最大值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .t1{
            width:100%;
            height:20px;
            margin-bottom:10px;
            background:red;
        }
        .t2{
            width:100%;
            height:20px;
            margin-top:10px;
            background:blue;
        }

    </style>
</head>
<body>
    <div class="t1"></div>
    <div class="t2"></div>
</body>
</html>

可以看到，上下两个margin都是10px，按理叠加应该是20px，但实际是10px。
这种情况还好，但多个容器会存在多外边距折叠的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .t1{
            width:100%;
            height:20px;
            margin-bottom:10px;
            background:red;
        }
        .t2{
            width:100%;
            
            margin-top:10px;
          
        }
        .t3{
            width:100%;
            height:20px;
            
            margin-top:20px;
            background:blue;
        }
    </style>
</head>
<body>
    <div class="t1"></div>
    <div class="t2">
        <div class="t3"></div>
    </div>
</body>
</html>

t3容器的margin-top为20px，居然跟外部的10px折叠了，取大值就是20px。
我们其实想要的是，这个margin-top为20px，只留在t2中，而不跟外部折叠。怎么办呢？
####解决方案
1、对容器使用overflow:auto(非visible即可)。
2、在两个外边距之间加上边框border、或内边距padding。
3、浮动元素、内联块。
4、绝对定位或固定定位。
5、flex弹性布局。