首页 > 开发 > CSS > 正文

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

2017-09-12 09:34:57  来源: 网友分享
<!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><div class="a"></div><div class="b">    <div class="c"></div></div></body></html>

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

解决方案

因为在BFC中,两相邻(兄弟或父子)、没有边框且没有padding,元素的margin-top与其第一个常规文档流的子元素的margin-top,会产生marign-collapse(外边距折叠)。

你给b加边框,

border: 1px solid transparent;

或者加padding,

padding: 1px 0;

都能消除。

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

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