margin-top重叠问题

　

margintop

父子p的margin-top重叠问题，看如下示例：

<p class="p1">
    <p class="p2">

    </p>
</p>

.p1{
      width:200px;
      height:200px;
      background: green;
    }
.p2{
      width: 100px;
      height:100px;
      background: pink;
      margin-top: 50px;
    }

在以上情况浏览器上出现的结果是，会使得父元素距上方有50像素的现象：

解决方法是：

1. 修改父元素的高度，增加padding-top样式模拟（padding-top:1px，常用）；
2. 为父元素添加overflow:hidden;样式即可（完美）；
3. 为父元素或子元素声明浮动（float:left;可用）；
4. 为父元素添加border（border:1px solid transparent;可用）；
5. 为父元素或子元素声明绝对定位。

此外，介绍一些相关的CSS类似的知识点：

边界重叠一般指两个或多个盒子（可能相邻也可能嵌套）的相邻边界（其间没有任何非空内容、补白、边框）重合在一起而形成一个单一边界。

两个或多个块级盒子的垂直相邻边界会重合。边界宽度则是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

注意：相邻的盒子可能并非是由父子关系或同胞关系的元素组成。

边界的重叠也有例外情况：

1. 水平边距永远不会重合；

2. 在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠；

3. 相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样；

4. 设置了overflow属性的元素和它的子元素之间的margin不会被重叠（overflow取值为visible除外）；

5. 设置了绝对定位（position：absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样；

6. 设置了display：inline-block的元素，垂直margin不会重叠，并且和他们的子元素之间也是一样的；

7. 根元素的垂直margin不会被重叠。

文章最后发布于: 2018-10-09 11:11:55

相关阅读

Word2013中解决文字重叠现象

Word用于文字编辑，遇到文字重叠堆在一起的现象，怎么解决呢？本次课程就来告诉大家具体的解决方法。①在Word中，我们看到红字堆叠在一起