css中常见margin塌陷问题之解决办法

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

codingWeb

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

阅读量306

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/fesfsefgs/article/details/101113629

版权

本文探讨了CSS中垂直并列元素和嵌套元素的margin塌陷问题。当两个垂直排列的盒子设置margin时，它们之间的间距并不等于两者margin之和，而是取最大值。在嵌套关系中，子元素的margin会使父元素发生塌陷。解决这个问题的方法包括：为父元素添加`overflow: hidden`、设置`padding`、使用`display: table`、添加`border`或利用伪元素创建空元素。

摘要由CSDN通过智能技术生成

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

①垂直并列

首先设置两个DIV,并为其制定宽高

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
/*CSS部分*/
<style> 
    *{
         margin: 0; 
         padding: 0; 
    }
     .box1{ 
         width: 200px; 
         height: 200px; 
         background: yellowgreen;
     } 
    .box2{ 
         width: 200px; 
         height: 200px; background: gray; 
    }
</style>

在这里插入图片描述
对box1我们为其设置margin-bottom：50px;
对box2我们为其设置margin-top： 40px;

<style>
*{
    margin:0;
    padding:0;
}
.box1{
    width:200px;
    height:200px;
    background: yellowgreen;
    margin-bottom: 50px;
}
.box2{
    width:200px;
    he

最低0.47元/天解锁文章

codingWeb

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css中常见margin塌陷问题之解决办法

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。①垂直并列首先设置两个DIV,并为其制定宽高<body> <div class="box1">box1</div> <div class="box2">box2</div></body>/*CSS部分*/<style>...
复制链接

扫一扫