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

最新推荐文章于 2023-08-05 09:31:43 发布

VIP文章 codingWeb

最新推荐文章于 2023-08-05 09:31:43 发布

阅读量282

点赞数

分类专栏：前端

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

版权

当两个盒子在垂直方向上设置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;
}
.

最低0.47元/天解锁文章

优惠劵

codingWeb

关注关注

0
点赞
踩
1

收藏

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

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

扫一扫