css防止边距重叠的方法


1.今天整理了一下防止margin击穿的几种方法

先假设一组dom结构

<div class="parent">
<div class="child">
</div>
</div>

 

通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而

这其实不是我们想要的结果,我们只想对子元素设置margin,那么现在我们应该怎么做呢?

(1) 给父元素设置边框

.parent {

width: 300px;       

height: 300px;

border: 1px solid #ccc;

}

.child {

width: 200px;

height: 200px;

margin: 20px;

}

(2)给父元素添加padding

.parent {

padding: 1px;

width: 300px;

height: 300px;

}

.child {

width: 200px;

height: 200px;

margin: 20px;

}

(3)在子元素上方加一个有宽高的兄弟元素,记住是有宽高的。
<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

(4)给父元素设置 overflow: hidden; 属性
.parent {
overflow: hidden;
width: 300px;
        height: 300px;
}

.child {

width: 200px;

height: 200px;

margin: 20px;

}


(5)给子元素设置 display: inline-block;(如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题)


.parent {
width: 300px;
        height: 300px;

.child {
width: 200px;

height: 200px;

margin: 20px; 

display: inline-block;

}
(6)使子元素脱离文档流这个实现的方法有很多,浮动,绝对定位等,这里我就不做具体的解释了。
希望可以能帮助到需要的人,如果你觉得这个文章帮到你了,就麻烦动动小手点个赞吧!嘿嘿


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值