margin重叠,塌陷,穿透问题的解决

最新推荐文章于 2023-02-11 23:28:15 发布

管理界的扫地僧

最新推荐文章于 2023-02-11 23:28:15 发布

阅读量1.8k

点赞数

分类专栏：面试题文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_48181168/article/details/120173952

版权

面试题专栏收录该内容

34 篇文章 16 订阅

订阅专栏

margin塌陷问题解决

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

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

margin重叠

margin重叠也叫外间距重叠或者是外间距合并,也或者叫做外间距穿透
外间距合并指的是:当两个垂直外间距相遇时,它们会合并成一个外间距
合并后的外间距高度等于两个发生合并的外间距的高度中的较大者。

发生的情况有以下几种:

1.兄弟元素之间
2.父子元素之间
3.空元素上下外间距之间
4.空元素上下外间距和其他元素之间。
不论出现上述哪种情况，重叠后取得都是较大值

消除外间距重叠的方法:

1.添加透明边框
2.外层设置padding
3.外层设置overflow:hidden
4.外层 zoom:1;(ie下清楚margin的重叠了解)
5.绝对定位: 内层float display:inline;(元素会被认为是内联元素而显示)

margin击穿问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin击穿</title>
        <style>
         .parent{
          width:200px;
          height:200px;
          background: red;
         }
         .son{
          width:100px;
          height:100px;
          background: blue;
          margin-top:100px;
          color:red;
         }
   </style>
    </head>
    <body>
        <div class="parent">
            <div class="son">我是儿子 </div>
        </div>
    </body>
</html>

我们明明只设置了子元素son的margin值，结果这个100px的margin-top却最终却作用在了父元素parent上，运行结果如下图所示，这就是所谓的margin击穿。

两种方式来解决

一种是给父元素加border,

一种就是给父元素设置overflow:auto,

另一种父级或子元素使用浮动或者绝对定位absolute（浮动或绝对定位不参与margin折叠）

需要注意的一点是，如果子元素不是div,p,h1等块级标签，而是a,span等行内标签的话，则不会出现margin击穿问题。此外，如果父元素和子元素之间还有别的内容，即html代码如下所示的话也不会导致margin击穿问题。

管理界的扫地僧

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
margin重叠,塌陷,穿透问题的解决

margin塌陷问题解决（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border: 1px solid transparent）（2）为父盒子添加overflow: hidden;（3）为父盒子设定padding值；（4）为父盒子添加position：fixed；（5）利用伪元素给子元素的前面添加一个空元素.box1:before{ content:""; overflow:hidden; }
复制链接

扫一扫