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

__x__(22)0907第四天__ 垂直外边距重叠

时间:2018-09-07 20:08:03      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:解决方法   width   tom   image   没有   padding   外边距   情况下   inf   

外边距重叠,

也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者。。。在布局时,易造成混淆。


1. 上下元素 垂直外边距重叠

垂直相邻的两个div,上面的div设置了margin-bootom,遇到下面div设置的margin-top,会发生重叠,产生一个较大的外边距
技术分享图片


2. 父子元素 垂直外边距重合

父子元素div时,为子元素div设置上边距时,两个div都会发生向下偏移,此时父子元素的外边距重叠。

当一个元素包含在另一个元素中时(假设没有内边距padding或边框border把外边距分隔开),它们的上和/或下外边距也会发生合并。

技术分享图片

 


 

3. 空元素自身 垂直外边距重叠

假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生重叠。

技术分享图片


 解决方法:

  • 为父元素加一个padding或者border。。。缺点:改变了可见框的大小,需要减去适应。。。这里增加了,需要在那里减小。

 

__x__(22)0907第四天__ 垂直外边距重叠

标签:解决方法   width   tom   image   没有   padding   外边距   情况下   inf   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9606586.html

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