相邻元素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>

效果如下：两个div左右相距60px，而不是30px了！

巴特西

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

最新文章

热门文章