&&5919 阅读
原文地址： by
不怀疑你也在工作中遇见过
几乎可以不用怀疑，前端工作中的你一定遇见过 margin 折叠。
不确定？别着急，你可能写过这样的代码：
margin: 50
&div id=&demo&&
&p&我是一个华丽的段落，别看我文字少&/p&
&p&我是另一个华丽的段落&/p&
大家觉得这 2p 之间会发生点什么？是会合体呢？还是分开？来看看 DEMO1
好吧，它们真的合体了。按照常规思路，这 2p 之间的空白应该是第一个 p 的 margin-bottom 50px 加上第二 p 的 margin-top 50px，即 50 + 50px = 100px ，但结果总是出乎意料不是么？它们之间只剩下了 50px，这就是 margin折叠。所以任何人遇见过我都不会觉得意外，因为这样的Code看起来没有任何问题。
它们之间到底发生了些什么？
这 2p 内部到底发生了什么，才会有这样的表现？
早在CSS1中就有对 margin 折叠的说明，我们来看看：
原文：The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects.
翻译：外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值。多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。
从这段话中，我们能获得一些有用的信息：
发生折叠需要是相邻的非浮动元素；
折叠发生在垂直外边距上，即margin-top/margin-bottom；
折叠后取其中最大的那个margin值作为最终值；
所以 DEMO1 中的 2p 符合折叠的条件，相邻且都不是浮动元素，于是它们就自然合体了。至于取最大的那个值作为折叠后的最终值，因为都是50px，所以无所谓谁谁谁了。
为什么会有margin折叠这样的设计？
从上文中，应该能知道个大概？在前面的文章中，我们说过，CSS的基本模型是排版。只是前端工程师现在做得更多的是 布局 而非 文字排版，但CSS并未界定这两者的区别。而 margin 折叠是为实现文本排版的段落间距而提供的特性。所以很多时候 margin 折叠的特性会带给我们诸多疑惑。
再回到 DEMO1 仔细看看，你会惊讶的发现，其实你只要设置每个 p 有相同的垂直外边距，由于发生会 margin 折叠，所有的 p 之间，及包含块与 p 之间的间隙都是相同的，非常美妙且实现简单，不是么？这正印证了我们引用 CSS1 中的那短话：多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。
浮动元素真的不会发生margin折叠吗？
质疑精神一直都是进步最重要的驱动力之一，我们为什么不能呢？改下代码看看：
margin: 50
只改CSS代码，HTML不变。迫不及待的想看到验证情况，来吧，还等什么。DEMO2 。
结果告诉我们，真的没有折叠，2p 间的间隙足足有 100px。
剩下的2点大家就自行验证吧，相信你能得到满意的额测试结果。
仅此而已？
回想一下我们在
文中提到过受书写模式影响的一些特性，非常不幸，margin 折叠正好是其中之一。
是的，在CSS2及后续的规范中，将margin 折叠描述得更为详尽了。
在水平书写模式下，发生 margin 折叠的是垂直方向，即 margin-top/margin-bottom，在垂直书写模式下，margin 折叠发生在水平方向上，即 margin-right/margin-left。
现在我们来解释一下到底什么是margin折叠？
在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠，且产生的已合并的外边距被称为折叠外边距。
处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，则称之为相邻。
什么是垂直边缘毗邻？
元素的上外边距和其属于常规流中的第一个孩子的上外边距。
元素的下外边距和其属于常规流中的下一个兄弟的上外边距。
属于常规流中的最后一个孩子的下外边距和其父亲的下外边距，如果其父亲的高度计算值为 auto。
元素的上、下外边距，如果该元素没有建立新的块级格式上下文，且 min-height 的计算值为零、height 的计算值为零或 auto、且没有属于常规流中的孩子。
说得很清楚了，我想是的。你可能需要注意的是发生 margin 折叠的元素不一定是兄弟关系，也能是父子或祖先的关系。
如何避免margin折叠？
我想肯定有人要问，那我不想有 margin 折叠的情况发生，该怎么办？其实从上面的规则中，我们已经可以抽出避免 margin 折叠的条件来。
margin 折叠元素只发生在块元素上；
浮动元素不与其他元素 margin 折叠；
定义了属性overflow且值不为visible（即创建了新的块级格式化上下文）的块元素，不与它的子元素发生margin 折叠；
绝对定位元素的 margin 不与任何 margin 发生折叠。
特殊：根元素的 margin 不与其它任何 margin 发生折叠；
如果常规流中的一个块元素没有 border-top、padding-top，且其第一个浮动的块级子元素没有间隙，则该元素的上外边距会与其常规流中的第一个块级子元素的上外边距折叠。
可能有些绕，我们验证一下 ，在其第一个浮动子元素加个全角空格做间隙，来个反证
如果一个元素的 min-height 属性为0，且没有上或下边框以及上或下内边距，且 height 为0或者 auto，且不包含行框，且其属于常规流的所有孩子的外边距都折叠了，则折叠其外边距。验证一下
这样干掉margin折叠
如果不想发生 margin 折叠，那么你可以根据上面的规则得到方法，不是么？我把它改成非块元素，让它浮动，让它绝对定位，让它 overflow:hidden ，用边框隔开它们 ...随你怎样，信手拈来。
今天状态不太好，有些地方写得欠妥，之后可能会修改一下。
BTW: 这篇文章里可能有不少之前文章中没出现过的名词，比如：块级上下文、行框、常规流，如果你对此不甚了解，可以先找资料看看，我以后会讲到。
margin系列文章：176被浏览26,509分享邀请回答738 条评论分享收藏感谢收起167 条评论分享收藏感谢收起CSS 参考手册
CSS 参考手册
W3School 的 CSS 参考手册定期通过所有主流浏览器进行测试。
CSS 属性组：
&CSS& 列指示该属性是在哪个 CSS 版本（CSS1、CSS2 或 CSS3）中定义的。
CSS3 动画属性（Animation）
规定动画。
所有动画属性的简写属性，除了 animation-play-state 属性。
规定 @keyframes 动画的名称。
规定动画完成一个周期所花费的秒或毫秒。
规定动画的速度曲线。
规定动画何时开始。
规定动画被播放的次数。
规定动画是否在下一周期逆向地播放。
规定动画是否正在运行或暂停。
规定对象动画时间之外的状态。
CSS 背景属性（Background）
在一个声明中设置所有的背景属性。
设置背景图像是否固定或者随着页面的其余部分滚动。
设置元素的背景颜色。
设置元素的背景图像。
设置背景图像的开始位置。
设置是否及如何重复背景图像。
规定背景的绘制区域。
规定背景图片的定位区域。
规定背景图片的尺寸。
CSS 边框属性（Border 和 Outline）
在一个声明中设置所有的边框属性。
在一个声明中设置所有的下边框属性。
设置下边框的颜色。
设置下边框的样式。
设置下边框的宽度。
设置四条边框的颜色。
在一个声明中设置所有的左边框属性。
设置左边框的颜色。
设置左边框的样式。
设置左边框的宽度。
在一个声明中设置所有的右边框属性。
设置右边框的颜色。
设置右边框的样式。
设置右边框的宽度。
设置四条边框的样式。
在一个声明中设置所有的上边框属性。
设置上边框的颜色。
设置上边框的样式。
设置上边框的宽度。
设置四条边框的宽度。
在一个声明中设置所有的轮廓属性。
设置轮廓的颜色。
设置轮廓的样式。
设置轮廓的宽度。
定义边框左下角的形状。
定义边框右下角的形状。
简写属性，设置所有 border-image-* 属性。
规定边框图像区域超出边框的量。
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
规定图像边框的向内偏移。
规定用作边框的图片。
规定图片边框的宽度。
简写属性，设置所有四个 border-*-radius 属性。
定义边框左上角的形状。
定义边框右下角的形状。
box-decoration-break
向方框添加一个或多个阴影。
如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
规定溢出元素的首选滚动方法。
围绕由 rotation-point 属性定义的点对元素进行旋转。
定义距离上左边框边缘的偏移点。
Color 属性
color-profile
允许使用源的颜色配置文件的默认以外的规范。
规定元素的不透明级别。
rendering-intent
允许使用颜色配置文件渲染意图的默认以外的规范。
Content for Paged Media 属性
bookmark-label
规定书签的标记。
bookmark-level
规定书签的级别。
bookmark-target
规定书签链接的目标。
float-offset
将元素放在 float 属性通常放置的位置的相反方向。
hyphenate-after
规定连字单词中连字符之后的最小字符数。
hyphenate-before
规定连字单词中连字符之前的最小字符数。
hyphenate-character
规定当发生断字时显示的字符串。
hyphenate-lines
指示元素中连续断字连线的最大数。
hyphenate-resource
规定帮助浏览器确定断字点的外部资源（逗号分隔的列表）。
设置如何对单词进行拆分，以改善段落的布局。
image-resolution
规定图像的正确分辨率。
向文档添加裁切标记或十字标记。
string-set
CSS 尺寸属性（Dimension）
设置元素高度。
设置元素的最大高度。
设置元素的最大宽度。
设置元素的最小高度。
设置元素的最小宽度。
设置元素的宽度。
可伸缩框属性（Flexible Box）
规定如何对齐框的子元素。
规定框的子元素的显示方向。
规定框的子元素是否可伸缩。
将可伸缩元素分配到柔性分组。
规定当超出父元素框的空间时，是否换行显示。
规定框的子元素的显示次序。
规定框的子元素是否应水平或垂直排列。
规定水平框中的水平位置或者垂直框中的垂直位置。
CSS 字体属性（Font）
在一个声明中设置所有字体属性。
规定文本的字体系列。
规定文本的字体尺寸。
为元素规定 aspect 值。
收缩或拉伸当前的字体系列。
规定文本的字体样式。
规定是否以小型大写字母的字体显示文本。
规定字体的粗细。
内容生成（Generated Content）
与 :before 以及 :after 伪元素配合使用，来插入生成内容。
递增或递减一个或多个计数器。
创建或重置一个或多个计数器。
设置嵌套引用的引号类型。
允许被替换元素仅仅是对象的矩形区域，而不是整个对象。
从流中删除元素，然后在文档中后面的点上重新插入。
page-policy
确定元素基于页面的 occurrence 应用于计数器还是字符串值。
规定网格中每个列的宽度。
规定网格中每个列的高度。
Hyperlink 属性
简写属性，设置target-name、target-new以及target-position属性。
规定在何处打开链接（链接的目标）。
规定目标链接在新窗口还是在已有窗口的新标签页中打开。
规定在何处放置新的目标链接。
CSS 列表属性（List）
在一个声明中设置所有的列表属性。
将图象设置为列表项标记。
设置列表项标记的放置位置。
设置列表项标记的类型。
marker-offset
CSS 外边距属性（Margin）
在一个声明中设置所有外边距属性。
设置元素的下外边距。
设置元素的左外边距。
设置元素的右外边距。
设置元素的上外边距。
Marquee 属性
marquee-direction
设置移动内容的方向。
marquee-play-count
设置内容移动多少次。
marquee-speed
设置内容滚动得多快。
marquee-style
设置移动内容的样式。
多列属性（Multi-column）
规定元素应该被分隔的列数。
规定如何填充列。
规定列之间的间隔。
设置所有 column-rule-* 属性的简写属性。
规定列之间规则的颜色。
规定列之间规则的样式。
规定列之间规则的宽度。
规定元素应该横跨的列数。
规定列的宽度。
规定设置 column-width 和 column-count 的简写属性。
CSS 内边距属性（Padding）
在一个声明中设置所有内边距属性。
设置元素的下内边距。
设置元素的左内边距。
设置元素的右内边距。
设置元素的上内边距。
Paged Media 属性
示意如何对width和height属性均不是auto的被替换元素进行缩放。
fit-position
定义盒内对象的对齐方式。
image-orientation
规定用户代理应用于图像的顺时针方向旋转。
规定元素应该被显示的页面特定类型。
规定页面内容包含框的尺寸和方向。
CSS 定位属性（Positioning）
设置定位元素下外边距边界与其包含块下边界之间的偏移。
规定元素的哪一侧不允许其他浮动元素。
剪裁绝对定位元素。
规定要显示的光标的类型（形状）。
规定元素应该生成的框的类型。
规定框是否应该浮动。
设置定位元素左外边距边界与其包含块左边界之间的偏移。
规定当内容溢出元素框时发生的事情。
规定元素的定位类型。
设置定位元素右外边距边界与其包含块右边界之间的偏移。
设置定位元素的上外边距边界与其包含块上边界之间的偏移。
设置元素的垂直对齐方式。
规定元素是否可见。
设置元素的堆叠顺序。
CSS 打印属性（Print）
设置当元素内部发生分页时必须在页面底部保留的最少行数。
设置元素后的分页行为。
设置元素前的分页行为。
设置元素内部的分页行为。
设置当元素内部发生分页时必须在页面顶部保留的最少行数。
CSS 表格属性（Table）
规定是否合并表格边框。
规定相邻单元格边框之间的距离。
规定表格标题的位置。
规定是否显示表格中的空单元格上的边框和背景。
设置用于表格的布局算法。
CSS 文本属性（Text）
设置文本的颜色。
规定文本的方向 / 书写方向。
设置字符间距。
设置行高。
规定文本的水平对齐方式。
规定添加到文本的装饰效果。
规定文本块首行的缩进。
text-shadow
规定添加到文本的阴影效果。
控制文本的大小写。
设置文本方向。
规定如何处理元素中的空白。
设置单词间距。
规定标点字符是否位于线框之外。
规定是否对标点字符进行修剪。
text-align-last
设置如何对齐最后一行或紧挨着强制换行符之前的行。
向元素的文本应用重点标记以及重点标记的前景色。
text-align 设置为 &justify& 时所使用的对齐方法。
规定文本的轮廓。
规定当文本溢出包含元素时发生的事情。
向文本添加阴影。
规定文本的换行规则。
规定非中日韩文本的换行规则。
允许对长的不可分割的单词进行分割并换行到下一行。
2D/3D 转换属性（Transform）
向元素应用 2D 或 3D 转换。
允许你改变被转换元素的位置。
规定被嵌套元素如何在 3D 空间中显示。
规定 3D 元素的透视效果。
规定 3D 元素的底部位置。
定义元素在不面对屏幕时是否可见。
过渡属性（Transition）
简写属性，用于在一个属性中设置四个过渡属性。
规定应用过渡的 CSS 属性的名称。
定义过渡效果花费的时间。
规定过渡效果的时间曲线。
规定过渡效果何时开始。
用户界面属性（User-interface）
允许您将元素设置为标准用户界面元素的外观
允许您以确切的方式定义适应某个区域的具体内容。
为创作者提供使用图标化等价物来设置元素样式的能力。
规定在使用 arrow-down 导航键时向何处导航。
设置元素的 tab 键控制次序。
规定在使用 arrow-left 导航键时向何处导航。
规定在使用 arrow-right 导航键时向何处导航。
规定在使用 arrow-up 导航键时向何处导航。
对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
规定是否可由用户对元素的尺寸进行调整。温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
孤鹰直飞九天上,谁来陪我共翱翔?
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
方法一：&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&无标题文档&/title&&style type="text/css"&ul{ margin:0; padding:0;}li{ list-style-type: float: margin-left:10 line-height:30}&/style&&/head&&body&&div style="width:100%; height:30 background-color:#093; position:left:0 top:0"&&ul&&li&sd&/li&&li&dsda&/li&&li&dsa&/li&&/ul&&/div&&div style="height:10000 border:1"&&/div&&div style="width:100%; height:30 background-color:#093; position:left:0 bottom:0;"&&/div&&/body&&/html&上面这个就是那个万恶的IE6可能会出现想不到的问题，在样式中加"_position:absolute",做个兼容吧！！！方法二：&html&&head&&&&&&title&&/title&&&&&&style&type="text/css"&&&&&&&&&html,body&{&&&&&&&&&&&&overflow:hidden;&&&&&&&&&&&&margin:0px;&&&&&&&&&&&&width:100%;&&&&&&&&&&&&height:100%;&&&&&&&&}&&&&&&&&.virtual_body&{&&&&&&&&&&&&width:100%;&&&&&&&&&&&&height:100%;&&&&&&&&&&&&overflow-y:scroll;&&&&&&&&&&&&overflow-x:auto;&&&&&&&&}&&&&&&&&.fixed_div&{&&&&&&&&&&&&position:absolute;&&&&&&&&&&&&z-index:2008;&&&&&&&&&&&&bottom:20px;&&&&&&&&&&&&left:40px;&&&&&&&&&&&&width:800px;&&&&&&&&&&&&height:40px;&&&&&&&&&&&&border:1px&solid&red;&&&&&&&&&&&&background:#e5e5e5;&&&&&&&&}&&&&&/style&&/head&&body&&div&class="fixed_div"&I&am&still&here!&/div&&div&class="virtual_body"&&&&&&div&style="height:888"&&&&&&&&&I&am&content&!&&&&&/div&&/div&&/body&&/html&
分析：html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
阅读(3403)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_085',
blogTitle:'如何让层固定在页面的某个位置而不随着滚动条随意滚动',
blogAbstract:'最近做网站，需要层不随滚动条滚动而动，就是固定在网页中了，以下就提供几种不用写JS的方法。。方法一：&!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"&&html xmlns=\"http://www.w3.org/1999/xhtml\"&&head&&meta http-equiv=\"Content-Type\" content=\"text/ charset=utf-8\" /&&title&无标题文档&/title&',
blogTag:'滚动条',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'孤鹰直飞九天上,谁来陪我共翱翔?',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}