javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > WEB前端 > CSS-HTML

css边距重叠解决方案

来源:IT技术网编辑:疯子发布于:2017-09-07人围观

今天整理了一下用css防止边距重叠的几种方法

先假设一组dom结构


1
2
3
4
<div class="parent">
   <div class="child">
   </div>
</div>

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

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

(1) 给父元素设置边框


1
2
3
4
5
6
7
8
9
10
.parent {
   width: 300px;      
   height: 300px;
   border: 1px solid #ccc;
}
.child {
   width: 200px;
   height: 200px;
   margin: 20px;
}

(2)给父元素添加padding


1
2
3
4
5
6
7
8
9
10
.parent {
   padding: 1px;
   width: 300px;
   height: 300px;
}
.child {
   width: 200px;
   height: 200px;
   margin: 20px;
}

(3)在子元素上方加一个有宽高的兄弟元素,记住是有宽高的。

?

1
2
3
4
5
<div class="parent">
    <div style="width: 20px;height: 20px;margin-top: "></div>
    <div class="child">
    </div>
</div>

(4)给父元素设置 overflow: hidden; 属性


1
2
3
4
5
6
7
8
9
10
.parent {
   overflow: hidden;
   width: 300px;
   height: 300px;
}
.child {
   width: 200px;
   height: 200px;
   margin: 20px;
}

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


1
2
3
4
5
6
7
8
9
10
.parent {
   width: 300px;
   height: 300px;
}
.child {
   width: 200px;
   height: 200px;
   margin: 20px;
   display: inline-block;
}

(6)使子元素脱离文档流这个实现的方法有很多,浮动,绝对定位等,这里我就不做具体的解释了。


上一篇:CSS百分比padding制作图片自适应布局

下一篇:没有了

与相关的文章
有时间的话来看看IT界的突发事件