码迷,mamicode.com
首页 > 其他好文 > 详细

解决垂直外边距合并的几种办法

时间:2019-10-09 12:13:46      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:class   hidden   外边距   oat   border   容器   垂直   其他   gpo   

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

 

在父级容器有上下外边距的情况下,子元素如果添加外边距,父元素和子元素的垂直方向上的外边距会合并,相邻元素也会合并。在用margin给子元素和父元素之间留空白的时候通常会发生这样的问题。

几种解决办法:

1:父容器:border:1px solid;(不能是0px)

2:父容器:overflow: hidden;(或auto)

3:父容器:padding:1px;(不能是0或auto,其他的任意数值都可以)

4:父容器或子容器: float:left;(不能是auto)

5:父容器或子容器:position:absolute;

6:子容器:display:inline-block;(或是inline-table)

7:相邻元素:任意一个添加float:left(不能是auto)

解决垂直外边距合并的几种办法

标签:class   hidden   外边距   oat   border   容器   垂直   其他   gpo   

原文地址:https://www.cnblogs.com/zhuochong/p/11640690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!