子元素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; |