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

投稿  雅兮网 2016-11-22 阅读 84 次 评论 25 条
摘要:

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

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

问题描述:

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>padding-demo</title>
  6. <style type="text/css">
  7.  * {padding:0;margin:0;border:0;}
  8.  .wrap {
  9. width: 600px;
  10. margin: 0 auto;
  11. background: grey;
  12. height: 300px;
  13.  }
  14.  .wrap .box {
  15. font-size: 18px;
  16. color: #fff;
  17. width: 300px;
  18. height: 100px;
  19. line-height: 100px;
  20. margin: 0 auto;
  21. background-color: orange;
  22. margin-top: 50px;
  23. text-align: center;
  24.  }
  25.  </style>
  26. </head>
  27. <body>
  28.  <div class="wrap">
  29.  <div class="box">我是内容</div>
  30.  </div>
  31. </body>
  32. </html>

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

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

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

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

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

解决办法:

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

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 为父元素例子中的middle元素增加一个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外边距被作用在父元素 第2张

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

CSS外边距合并实例

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

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

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

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

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

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

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

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

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

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

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

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

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

本文地址:http://boke112.com/3654.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 捌零男人
    捌零男人 【镇长】 @回复

    现在的CSS越来越规范了,之前学的时候就y盒子模型就搞头大

  2. 阿飞
    阿飞 【县长】 @回复

    关于CSS我一直都是在看视频教程。一直是知其然不知其所以然

  3. 雅兮网
    雅兮网 【省长】 @回复

    通俗的说法是 如何在布局中避免外边距(margin)重合,防止他们重合的直接方法就是不让他们相遇,给父元素加内边距(padding)或者边框(border)或者给他们设置浮动(float)总之把父元素和子元素的外边框隔开就不会合并了,这是个技巧

  4. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    [偷笑] 菜鸟+小白一个,能够自己搞定的自己搞定,但很多的东西实在弄不来。如果今后某一天我的博客能够流量做上去的话,对于这些花钱请人帮弄倒不失为一个好办法。

  5. 金榜台博客
    金榜台博客 【县长】 @回复

    很不错,学习了

  6. 姜辰
    姜辰 【市长】 @回复

    前端的菜鸟前来学习。😁

  7. 闲鱼
    闲鱼 【村长】 @回复

    [呲牙] 学习

  8. 木小也
    木小也 【县长】 @回复

    改一下博客自适应要多少钱

  9. 分钱榜
    分钱榜 【镇长】 @回复

    来拜访了,大神就是大神,都看不懂

  10. 我要网赚
    我要网赚 【县长】 @回复

    我也每天学习代码的东西,学习了不少了,很多都是被逼无奈的结果

  11. 夏日博客
    夏日博客 【县长】 @回复

    margin-top 经常要用到。

  12. 商学院
    商学院 【农民】 @回复

    装作看得懂的样子来评论下

  13. 麦林风博客
    麦林风博客 【队长】 @回复

    CSS只懂的一点皮毛的路过

  14. 橘子书
    橘子书 【县长】 @回复

    会者不难,无非就是margin(位置)跟padding(内边距)的运用,的确是纯干货。
    ps:感觉雅兮应该将教程分开写,一个是直接写出css样式,告诉小白这么搞,就是实现某种样式的css;另外一个是写分析原理、步骤、原因的干货,给有点css基础的人看。

    • 雅兮网
      雅兮网 【省长】 @回复

      @橘子书 主要说的还是css有 两个外边距(margin)直接相遇会合并这一规范,或者说是遇到这个问题该怎么解决,就像文中说的那样 想要两个相套的盒模型,父盒子居顶,子盒子在父盒子里有个外边距…….
      算是一个遇到问题解决问题的方法文章吧,如果根本没动过css 那肯定是看的一头雾水 [衰]

  15. 韩娱部落
    韩娱部落 【村长】 @回复

    CSS得长期练习才记得到一些属性的作用

  16. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    [抓狂] 我表示,我对这些也很是看不懂,勉勉强强略知一二罢了。

  17. 唯历史
    唯历史 【总理】 @回复

    真的很羡慕,能折腾样式,我是啥都搞不定

  18. 网际电脑
    网际电脑 【县长】 @回复

    CSS外边距合并还可以这样?不错

  19. 龙笑天
    龙笑天 【县长】 @回复

    CSS小白是也~~

  20. Koolight
    Koolight 【省长】 @回复

    好深奥,不懂css

  21. 爱时尚
    爱时尚 【市长】 @回复

    沙发抢到了