子元素margin-top影响父元素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
html为： <div class="show" > <h2>crystal </h2> </div> h2中设置margin-top的话，整个div会margin-top,即子元素margin-top影响父元素 ， <span style="color: red;">解决方法：</span> 1. 父级或子元素使用浮动或者绝对定位<code>absolute</code>浮动或绝对定位不参与margin的折叠 2. 父级<code>overflow:hidden; 3. 父级设置<code>padding</code>（破坏非空白的折叠条件） 4. 父级设置<code>border 理由： css2.1盒模型中规定的内容： In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. <span style="color: red;">所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗(pi第二声)邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。</span> 因为嵌套也属于毗邻，所以在样式表中优先级更高的 .show h2的margin覆盖了之前外层div定义的margin，导致最终整个div产生10px的间距。 若给h2也添加一个class，并且在.show之前定义，则最终结果如第一个图所示，最终margin显示为0； |