文档章节

CSS外边距合并的问题

糯小米
 糯小米
发布于 2015/03/22 21:56
字数 1674
阅读 5
收藏 0

外边距合并

外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。

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

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

CSS 外边距合并实例 1

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

CSS 外边距合并实例 2

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

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

CSS 外边距合并实例 3

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

CSS 外边距合并实例 4

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

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

CSS 外边距合并的实际意义

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

  在css2.1中,水平的margin不会被折叠。 

  垂直margin可能在一些盒模型中被折叠: 

     1、在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠。 

     最终的margin值计算方法如下: 

        a、全部都为正值,取最大者;

        b、不全是正值,则都取绝对值,然后用正值减去最大值;

        c、没有正值,则都取绝对值,然后用0减去最大值。

      注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 

    2、相邻的盒模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠,甚至一个浮动的盒模型和它的子元素之间也是这样。 

    3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为visible除外)。 

    4、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。 

    5、设置了display:inline-block的元素,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。 

    6、如果一个盒模型的上下margin相邻,这时它的margin可能折叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否被折叠。 

        a、如果元素的margin和它的父元素的margin-top折叠在一起,盒模型border-top的边界定义和它的父元素相同。

        b、另外,任意元素的父元素不参与margin的折叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。

      一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。 

      注意,那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。 

    7、根元素的垂直margin不会被折叠。

    浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素(floated next in-flow block-level sibling)的margin-top相邻,除非那个同级元素使用了清除操作。 

  浮 动的块级元素的margin-top和它的第一个浮动块级子元素(floated first in-flow block-level child)的margin-top相邻(如果该元素没有border-top,没有padding-top,并且子元素没有使用清除操作)。 

  浮动的块级元素的margin-bottom如果符合下列条件,那么它和它的最后一个浮动块级子元素的margin-bottom相邻(如果该元素没有指定padding-bottom或border): 

      a、指定了height:auto

      b、min-height小于元素的实际使用高度(height)

      c、max-height大于元素的实际使用高度(height)

  如 果一个元素的min-height属性设置为0,那么它所拥有的margin是相邻的,并且它既没有border-top和border- bottom,也没有padding-top和padding-bottom,它的height属性可以是0或auto,它不能包含一个内联的盒模型 (line box),它所有的浮动子元素(如果有的话)的margin也都是相邻的。 

  当一个元素拥有的margin折叠了,并且它使用了清除操作,那么它的margin-top会和紧随其后的兄弟元素的相邻margin折叠,但结果是它的margin将无法和其块级父元素的margin-bottom折叠。 

  折叠操作是以padding、margin、border的值为基础的(即在浏览器解析所有这些值之后),折叠后的margin计算将覆盖已使用的不同margin的值。

如何解决

  W3C的CSS2.1 定义了几种情况,简单为元素添加边框或者间距(border or padding)就可以不使边距重叠。

  我们 添加一个小的间距:

 

  #box {background#F80margin10pxpadding1px 0;


本文转载自:http://blog.sina.com.cn/s/blog_601b97ee0101b8xe.html

糯小米
粉丝 0
博文 8
码字总数 1538
作品 0
桂林
私信 提问
我对margin外边距合并的理解

在我初学css的时候,关于css盒模型的外边距合并问题,迷惑了我很久。在写demo的时候,我只是尽量避免两个div外边距合并,怕出现各种各样匪夷所思的bug。 工作不久,经过几个项目的洗礼,这个...

会写代码的husky
2016/09/21
155
0
从CUMT校园导航出现的问题看CSS布局设计(一) CSS盒模型

本文转载于:猿2048网站从CUMT校园导航出现的问题看CSS布局设计(一) CSS盒模型 先说说做的这个校园导航系统值得一提的内容: 1. 二级菜单栏 、iframe内嵌窗口(样式设计、用hover做效果) ...

前端老手
08/28
16
0
深入CSS基础之box model

阅读注意事项 本篇文章的依赖主要是CSS2.1 specification 8. box model 和 CSS Box Model Module Level 3。 本篇整体比较细节和理论,可能会看起来枯燥,我尽量讲的逻辑简单些。个人认为有时...

JunYu
02/20
0
0
CSS篇-CSS小技巧与注意手记(一)

①盒子水平居中注意 代码 效果 ②相邻块元素垂直外边距的合并 有 A 盒子 与 B 盒子 给A盒子底部设置 给B盒子顶部设置 则AB 之间的垂直距离相加为 要以大的距离为准为 代码 效果 如果一个盒子...

TianTianBaby223
2018/07/04
0
0
从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理;穷理之要...

Damonare
2017/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
4
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
7
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
10
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
14
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部