CSS外边距合并:子元素的margin-top外边距被作用在父元素

王小优
王小优
王小优
231
文章
0
评论
2015年10月10日
评论
4,611 1549字阅读5分9秒

CSS外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。不理解此规范的话,会在前端布局中出现异常问题,本文深入浅出学习此规范,并提供解决办法。

不得不说前端是一个水很深的行业,虽然起点低,稍微一学就能入门;但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的,我就遇到了CSS外边距合并这一看似非主流却很主流的问题。

问题描述:

我想得到一个两个内套的盒子模型,并设置子盒子的上边距为50px;于是写了如下代码:

0

但在浏览器中得到的确实下图的效果:

CSS外边距合并:子元素的margin-top外边距被作用在父元素

奇怪了,我明明是想让box在warp中有个上边距,为啥box紧贴了wrap,而wrap却有了个50px的上边距,听说过子元素继承父元素的属性,还没见过父元素也会用子元素的属性。

赶紧学习了一下,是我才疏学浅了,原来这就是CSS外边距合并规范。引用w3school的定义是:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

这就很好理解我遇到的问题,子元素的margin-top:50px,直接遇到了父元素的margin:0,然后合并到父元素上了。

解决办法:

那么既然知道CSS有此规范,那有什么解决办法么?答案是肯定的!

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 为父元素例子中的wrap元素增加一个border-top或者padding-top即可解决这个问题。另外只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

解决方法:

  1. 修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
  2. 为父元素添加overflow:hidden;样式即可(完美)
  3. 为父元素或者子元素声明浮动(float:left;可用)
  4. 为父元素添加border(border:1px solid transparent可用)
  5. 为父元素或者子元素声明绝对定位

所以我只需要给wrap增加一个overflow:hidden;就完美解决了,得到如下效果:

CSS外边距合并:子元素的margin-top外边距被作用在父元素

注:令人哭笑不得的是该问题在IE7/IE8下是不会出现的,却在现代浏览器上绊了一脚,不过看了文尾的解释后,你就知道它其实也是有意义的一个规范。

CSS外边距合并实例

另外用几张图片来更生动形象的描述CSS外边距合并这一“BUG”。

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

CSS外边距合并:子元素的margin-top外边距被作用在父元素

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

CSS外边距合并:子元素的margin-top外边距被作用在父元素

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。

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

CSS外边距合并:子元素的margin-top外边距被作用在父元素

如果这个外边距遇到另一个元素的外边距,它还会发生合并:

CSS外边距合并:子元素的margin-top外边距被作用在父元素

这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。

外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

CSS外边距合并:子元素的margin-top外边距被作用在父元素

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
CSS样式表属性最佳书写顺序是怎样的? CSS

CSS样式表属性最佳书写顺序是怎样的?

混乱的CSS属性书写顺序会对网页的加载渲染造成影响,拖慢页面加载速度。一个规范的CSS属性书写属性也是网页优化的组成部分,值得每一位前端爱好者重视。 这段时间稍微整理了一下之前写的样式表,就来说下CS...
一段CSS代码让你的广告位“立起来” CSS

一段CSS代码让你的广告位“立起来”

很多网站上都会投放广告,但一般情况下广告都不那么“好看”,如果我们对广告位稍微进行美化,说不定能出人意料呢。 广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可能影响用户体验,特别是广告联盟...
常用的几个CSS前端效果 更轻松的写页面 CSS

常用的几个CSS前端效果 更轻松的写页面

本文收集了20多个常用的CSS效果,在写页面的时候可以直接使用,不用再一遍一遍的做无用功了,大大提高了开发效率。 做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如Bootstrap等,我们轻松...
HTML中引入CSS的四种常用方法及各自的缺点 CSS

HTML中引入CSS的四种常用方法及各自的缺点

在WEB前端开发中最基本是就是HTML+CSS了,HTML就好比是骨架,CSS就是皮肉,那么你知道在HTML中引入CSS有哪些方法以及各自的缺点么? 在WEB前端开发中最基本是就是HTML+CSS了,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: