margin的塌陷现象

最新推荐文章于 2024-05-16 15:59:52 发布

正在修炼web的小芮

最新推荐文章于 2024-05-16 15:59:52 发布

阅读量107

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125616214

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

margin的坍塌现象：

标准文档流中，竖直方向的margin不累加，以较大的margin值为准进行渲染。

 <style>
 .box{
            width: 200px;
            height: 200px;
        }
        .box1{
              background-color: yellowgreen;
            /* 下外边距 */
            margin-bottom: 50px;
        }
        .box2{
            background-color: blueviolet;
            /* 上外边距 */
            margin-top: 30px;
        }
        /* 如果不在标准流盒子之间是没有塌陷现象的*/
    </style>
</head>
<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
</body>

预览效果图

这个例子,浏览器渲染页面的时候，用的外边距是box1设置的值。box2设置的值舍弃没有用。

解决塌陷现象：不要同时给两个盒子设置上下外边距。(标准文本流中)

如果不在标准流盒子之间是没有塌陷现象的 ：

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 430px;
            border: 5px solid pink;
            /* 溢出： 该属性规定当内容溢出元素框时发生的事情，
            设置内容是否会被修剪，溢出部分是否会被隐藏；例如当属性值设置为“visible”则内容不会被修剪，
            为“hidden”则内容会被修剪并且其余内容是不可见的。*/
            overflow: hidden;
        }
        .box{
            /* 如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：  */
            width: 220px;
            height: 220px;
            /* 浮动（浮动元素是脱离标准文档流的，我们简称脱标 */
            float: left;
        }
        .box{
        /* 给盒子1设置下外边距 */ 
            border: 1px solid yellow;
            margin-bottom: 50px;
        }
        .box2{
                /* 给盒子2设置上外边距 */
            border: 1px solid skyblue;
            margin-top: 30px;
        }
</style>
</head>
<body>
    <!-- .parent>.box.box1+.box.box2 -->
     <!-- .parent>.box.box1(盒子1)+.box.box2(盒子2) -->
    <div class="parent">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
    </div>
</body>

预览效果图