首页 > > 网页制作 > css >

相邻元素margin的自动合并与float的坑

2020-04-30 16:02:16来源：博客园阅读 ()

相邻元素margin的自动合并与float的坑

css中相邻元素的margin其实是会自动合并的，且取较大值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
            .div1 {
                width: 60px;
                height: 60px;
                background-color: #fdd;
                border: 10px solid #fee;
                padding: 20px;
                margin: 30px;
                /*设置上下margin为30px*/
            }
            .div2 {
                width: 60px;
                height: 60px;
                background-color: #fdd;
                border: 10px solid #fee;
                padding: 20px;
                margin: 60px 30px;
                /*设置上下margin为60px*/
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

实际效果：div1和div2上下相距60px，而不是90px。

那float的坑是什么啦？

那就是float会取消相邻元素margin的自动合并！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
            div {
                width: 60px;
                height: 60px;
                background-color: #fdd;
                border: 10px solid #fee;
                padding: 20px;
                margin: 30px;
                float: left;
                /*设置左浮动*/
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
</html>