首页 > 代码库 > [CSS]解决父子元素margin-top重叠问题

[CSS]解决父子元素margin-top重叠问题

2024-09-19 19:08:50   216人阅读

问题代码：
  1. <div id="father" style="background:#eee;">
  2. 		<div id="son" style="margin-top:50px;">son</div>
  3. </div>

方法一：
父元素设置overflow:hidden
  1. <div id="father" style="background:#eee;overflow:hidden;">
  2. 		<div id="son" style="margin-top:50px;">son</div>
  3. </div>

方法二：
父元素设置border-top
  1. <div id="father" style="background:#eee;border-top:1px solid transparent;">
  2. 		<div id="son" style="margin-top:50px;">son</div>
  3. </div>

方法三：
父元素设置padding-top
  1. <div id="father" style="background:#eee;padding-top:1px;">
  2. 		<div id="son" style="margin-top:50px;">son</div>
  3. </div>

方法四：
父子元素间增加一个inline元素
  1. <div id="father" style="background:#eee;">&nbsp;
  2. 		<div id="son" style="margin-top:50px;">son</div>
  3. </div>

[CSS]解决父子元素margin-top重叠问题


联系
我们