margin击穿问题（子元素的margin值作用在父元素上）

最新推荐文章于 2022-08-09 09:15:45 发布

小鬼web

最新推荐文章于 2022-08-09 09:15:45 发布

阅读量3.3k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/fenghui187/article/details/53888123

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端开发师在开发过程中经常会遇到这种问题，有时候明明设置的是子元素的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,这两种方式都是对父元素的操作，都可以解决问题，使margin-top不再作用于父元素上，而是正常的作用在子元素上。

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

小鬼web

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
margin击穿问题（子元素的margin值作用在父元素上）

前端开发师在开发过程中经常会遇到这种问题，有时候明明设置的是子元素的margin值，结果最后却作用在了父元素上，就像下面这个简单的代码： margin击穿 .parent{ width:200px; height:200px; back
复制链接

扫一扫

专栏目录