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

来源：互联网发布：开源实时数据库有哪些编辑：程序博客网时间：2024/04/30 09:02

前端开发师在开发过程中经常会遇到这种问题，有时候明明设置的是子元素的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击穿问题。

1 0