《CSS 网站布局实录：基于 Web 标准的网站设计指南》是一本非常经典的国产 CSS 教材，也是我的 CSS 启蒙书，我认为它适合每一位初学 CSS 的朋友阅读。此书第一版发布于 2006 年 9 月，上市不久即被发现存在较多的字面错误；于是一年后此书发行第二版，修正了部分错误，并针对行业趋势补充了少量章节。但是读者发现，在第二版中，仍然存在较多笔误。

尽管如此，《CSS 网站布局实录》仍然是当前最值得推荐的 CSS 教材之一，也正因为如此，有热心读者自发为此书整理和维护着多份勘误表。

除了这些字面错误之外，我发现《CSS 网站布局实录》还存在一个非常重大的概念错误，在第二版中依然延续，极易误导初学者。由于它鲜被提及，因此我决定记录成文，为这本书的读者做一个提示。

原文

我们看一下《CSS 网站布局实录》的 “第 7 章：浏览器兼容与解析问题” 下的 “7.7 高度不适应” 的这个小节，这里提到了一个 “高度不适应” 的现象，原文节选如下。

高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层对象使用 margin 或者 padding 之后。高度不适应问题并不是 IE 的专利，就连 Firefox 也出现了这种问题。……

高度不适应主要发生在两个嵌套的对象中，这里 div 作为外层对象，而 p 作为内层对象。……

除了背景之外，#box 仅是一个几乎没有任何样式的 div，而 p 对象加了两个非常关键的属性：margin-top: 20px; margin-bottom: 20px;，即上下外边距都是 20px。这时按照前面的盒模型原理，p 对象的高度应当是 20 + 20 + 文字的高度，即应当在 30px 以上。理论上，由于 p 的高度大于 30px，而 #box 这个 div 的高度也应当由 p 的高度挤开，至少达到 30px。我们看看预览的效果。……

似乎并非预想的结果，看上去带背景的 #box 还是和文字一样高，并没有超过 30px……

这一现象被作为浏览器渲染 bug 安排在了第 7 章，但事实上这种 “高度不适应” 并非 IE 或 Firefox 等浏览器的 bug。相反，这种表现是符合 CSS 规范的——虽然看起来似乎 “不太合理”。这种 “高度不适应” 是 CSS 盒模型 “外边距重叠” 特性的一种表现。

外边距重叠

“外边距重叠” 的英文原文是 “Margin Collapsing”，由于翻译的问题，通常又可能被称作 “空白边/margin 叠加/合并/塌陷” 等等。“外边距重叠” 是盒模型的重要特性之一，CSS 学习者必须了解和掌握。

“外边距重叠” 的表现在于，一个元素的垂直方向上的外边距可能会和其它元素或者它自身的垂直外边距进行重叠。这种重叠的行为并不像我们期望的那样把两个外边距相加，而是取其中的较大者；同时，这种重叠行为可能会连续发生，也就是说，可能会有多个元素的垂直外边距会重叠在一起。

“外边距溢出”

此外，外边距重叠还有一个非常特殊的情况，它也就是本文勘误的重点。我们来看一种实战当中比较常见的形情，我称它为 “外边距溢出”：

当子元素设置了上外边距（margin-top）之后，父元素并没有被撑高，仍然与子元素紧贴在一起；同时，父元素与它的上方的元素形成了空隙，仿佛这个上外边距是应用在父元素身上一样。

这种表现与我们的期望大相径庭。因此，很多人误以为这种现象是浏览器 bug（有网友将其戏称为 “margin 劫持”），但实际上浏览器的这种表现是正确的。本文所要澄清的《CSS 网站布局实录》一书中的重要错误也在于此。

更多讨论

相信每位 CSS 学习者都会提出一个疑问：为什么 CSS 规范要设置这么一个 “莫名其妙” 的规矩？

这实际上是为了更好地进行文章排版。限于篇幅，本文不做赘述，推荐阅读《精通 CSS》一书的《2.1.2 空白边叠加》一节（第一版中文版 P25～27）。当然我们也可以参考《CSS 权威指南》的相关章节，但《精通 CSS》在这个问题上的描述更加生动和到位。

除此以外，本站也会推出相关的文章，帮助你更好地剖析和掌握 “外边距重叠” 特性，同时提示你正确认识 IE6,7 在处理外边距重叠方面的问题，引导你如何在页面布局中避免它所带来的因扰，并且告诉你如何利用这一特性进行精确的文章排版。

相关阅读

• CSS 网站布局实录（第 2 版）第三章 勘误
• 《CSS 网站布局实录》第二版勘误