需要更多色彩的
不是代码,而是生活

css子元素margin-top影响父元素的原因与解决方法

问题代码

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

我们期望的是son距father上面有50px距离,实际上,这段代码在浏览器里渲染出来的结果是son与father上面并没有间隙,反而是father下沉了50px,这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决方法

方法1、父元素设置overflow:hidden

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

方法2、父元素设置border-top

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

方法3、父元素设置padding-top

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

方法4、父子元素间增加一个inline元素

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

方法5、为父元素添加浮动

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

方法6、为父元素设置绝对定位

<div id="father" style="background:#eee;position:absolute;">
    <div id="son" style="margin-top:50px;">son</div>
</div>
赞(1) 打赏
未经允许不得转载:代码一线 » css子元素margin-top影响父元素的原因与解决方法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就支持一下本站

支付宝扫一扫打赏

微信扫一扫打赏