css margin塌陷问题

最新推荐文章于 2023-06-10 21:24:01 发布

Kotoba209_

最新推荐文章于 2023-06-10 21:24:01 发布

阅读量483

点赞数

分类专栏： css 文章标签： css margin 布局

本文链接：https://blog.csdn.net/Kotoba209_/article/details/95208952

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css margin塌陷问题

垂直并列

先设置两个div，并分别设置宽高背景色。

<style>
 * {
     margin: 0;
     padding: 0;
 }

 .box1 {
     width: 200px;
     height: 200px;
     background-color: cornflowerblue;
 }

 .box2 {
     width: 200px;
     height: 200px;
     background-color: brown;
 }
</style>
<body> 
 <div class="box1">box1</div>
 <div class="box2">box2</div>
</body>

在这里插入图片描述
挨着不太好看，在原来样式的基础上给两个div设置margin
box1设置margin-bottom：40px；
box2设置margin-top：20px；

.box1 {
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
        margin-bottom: 40px;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: brown;
        margin-top: 20px;
    }

按照正常的思维40+20 = 60，所以box1和box2的边距应该是60px，但实际结果如下。
在这里插入图片描述
两个div的边距只有40px，并不是想象中的60，因此可以得出一下结论：处于上下并列的两个div，当想要分别设置其margin-bottom和margin-top属性来改变他们的间距时，取它们中的最大值作为两者之间的间距，如box1的margin-bottom：40px；box2的margin-top：20px；则取box1的margin-bottom：40px；作为两者的间距。

嵌套关系
设置一个div，里面嵌套着另一个div，分别设置相对应的宽高和背景色。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 400px;
        height: 400px;
        background-color: cornflowerblue;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: brown;
    }
</style>
<body> 
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述
给子元素设置margin-top：20px；使其和父元素不要挨得那么近。

在这里插入图片描述
结果还是未如能所愿，子元素和父元素的间距并不能成功设置，反而父元素与子元素一起与页面顶端产生了20px间距。

解决这个问题有如下方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border: 1px solid transparent）
（2）为父盒子添加overflow: hidden;
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）利用伪元素给子元素的前面添加一个空元素

.box1:before{ content:"";
             overflow:hidden; }

Kotoba209_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css margin塌陷问题

css margin塌陷问题垂直并列先设置两个div，并分别设置宽高背景色。<style> * { margin: 0; padding: 0; } .box1 { width: 200px; height: 200px; background-color: cornflowerblue; } .box2 ...
复制链接

扫一扫