首頁  >  問答  >  主體

前端 - margin的问题,那个老哥帮我解释下

<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .a{
            height:48px;
            background: #eee;
        }

        .b{
            height:520px;
            background: #ff4949;
        }

        .c{
            width:90%;
            height:300px;
            margin:20px auto;
            background: #fff;
        }
    </style>
</head>
<body>
<p class="a"></p>
<p class="b">
    <p class="c"></p>
</p>

</body>
</html>

p.c 不是应该被红色环绕吗?烦请那个老哥解释下。

伊谢尔伦伊谢尔伦2728 天前956

全部回覆(5)我來回復

  • 大家讲道理

    大家讲道理2017-04-17 14:55:40

    因為在BFC中,兩相鄰(兄弟或父子)、沒有邊框且沒有padding,元素的margin-top與其第一個常規文檔流的子元素的margin-top,會產生marign-collapse(外側距折疊)。

    你給b加邊框,

    border: 1px solid transparent;

    或加padding,

    padding: 1px 0;

    都能消除。

    或者,你可以加b overflow: hidden;

    可以參考:深入理解BFC和Margin Collapse

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 14:55:40

    你在.b中加入個overflow: hidden;就可以了。

    因為overflow 使用除了 visible 以外的值(hidden,auto,scroll)會觸發BFC。
    什麼是BFC?
    Block Formatting Contexts (區塊級格式化上下文)
    具有BFC 的元素可以看作是隔離了的獨立容器,容器裡面的元素不會在佈局上影響到外面的元素,並且BFC 具有普通容器沒有的一些特性,例如可以包含浮動元素,上文中的第二類清除浮動的方法(如overflow 方法)就是觸發了浮動元素的父元素的BFC ,使到它可以包含浮動元素,從而防止出現高度塌陷的問題。

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 14:55:40

    overflow: hidden; 你把這句話加到 p.b 上。

    回覆
    0
  • 迷茫

    迷茫2017-04-17 14:55:40

    搜尋「子元素margin影響父元素」

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-17 14:55:40

    這個叫外邊距重疊吧,子級元素的外邊距會影響父級元素,並且這兩的外邊距大整個容器的外邊距就以大的為準。這時候應該選擇觸發BFC,BFC是什麼前面幾位說的很清楚了,觸發BFC的情況有:

    • 根元素

    • float屬性不為none;

    • position為absolute或fixed;

    • display為inline-block, table-cell, table-caption, flex, inline-flex;

    • overflow不為visible;

    解決方法:

    如果你给父级加上overflow:hidden,或者加上透明边框就可以解决了。
    

    回覆
    0
  • 取消回覆