CV肉饼王

Talk is cheap. Show me the code.

0%

【CSS】父子元素margin-top重叠问题解决

发表于 更新于 分类于 Disqus： 本文字数： 820 阅读时长 ≈ 1 分钟

问题代码：

1
2
3
<div id="father" style="background:#eee;">
   <div id="son" style="margin-top:50px;">son</div>
</div>

方法一： 父元素设置overflow:hidden

1
2
3
<div id="father" style="background:#eee;overflow:hidden;">
   <div id="son" style="margin-top:50px;">son</div>
</div>

方法二： 父元素设置border-top

1
2
3
<div id="father" style="background:#eee;border-top:1px solid transparent;">
   <div id="son" style="margin-top:50px;">son</div>
</div>

方法三： 父元素设置padding-top

1
2
3
<div id="father" style="background:#eee;padding-top:1px;">
   <div id="son" style="margin-top:50px;">son</div>
</div>

方法四： 父子元素间增加一个inline元素

1
2
3
<div id="father" style="background:#eee;">&nbsp;
   <div id="son" style="margin-top:50px;">son</div>
</div>

方法五： 内容生成

1
2
3
4
.father:before {
    content:' ';
    display:table;
}