css margin边界叠加问题详谈

最新推荐文章于 2022-07-19 09:40:09 发布

aic25820

最新推荐文章于 2022-07-19 09:40:09 发布

阅读量184

点赞数

原文链接：http://www.cnblogs.com/vicky-li/p/6904473.html

版权

　　问题：给子元素一个margin-top值，其父元素会跟着往下走margin-top的值

　　　　一、代码展示

　　　　　　HTML

　　　　　　

<body>  
    <div class="box">  
        <div class="content" id="content"></div>  
    </div>  
</body>

　　　　CSS

div,body{  
    padding: 0;  
    margin: 0;  
}  
body{  
    background-color: darkgrey;  
}  
.box{  
    width: 400px;  
    height: 400px;  
    margin: 30px auto;  
    background-color: palegreen;  
}  
.content {  
    width: 50%;  
    height: 50%;   
    margin-top: 70px;  
    background-color: tomato;  
}

展示图

　　　　理想中

　　　　实际上

原因

　　　　1、当一个元素包含在另一个元素中时（如果没有填充或者边框将边界隔开），他们的顶边界或者底边界会发生叠加

　　　　详细相关知识请看 http://blog.csdn.net/weisuochengxuyuan/article/details/17379517

这时或者有的小伙伴会问：那个父元素的30px的margin-top值呢加起来应该是100px？

其实呢，父元素盒子元素的margin-top值是重叠了的，就是谁高谁顶着（有一种天塌下来高个儿顶着的感觉~）

解决方法：只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

　　1、给父元素设置padding-top：1px;(使边界不叠加);

　　2、给父元素一个边框border值;

　　3、为父元素添加over-flow：hidden;

　　4、使父元素或子元素浮动float:left;

　　5、为父元素添加position：absolute

　　6、为父元素或子元素添加display：inline-block;

以上可灵活处理，亲测有效哦~

转载于:https://www.cnblogs.com/vicky-li/p/6904473.html

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。