CSS权威指南 - 内边距 边框 和 外边距

九十年代的完全用表格布局，简单的段落边框都需要用表格。CSS让布局更方便。

基本元素框 basic element boxes

如同第七章基本视觉格式化那一章讲到，每个文档元素会生成一个元素框，这个框出现在文档布局中，影响其他元素的框。比如一个高1inch的元素框出现在文档的开头，那么下面的元素框将至少从文档1 inch以下的位置出现。

--------------------------------

* 宽度和高度

如下图最暗一个矩形框（内容区）的高度和宽度。

一个重要问题：高度和宽度属性不能应用在行内非替换元素上。比如你应用一个高度在链接上不会影响布局。

在讨论本章的时候，高度都默认为自动生成的，因为极少会设置正常文档流里元素的高度。因为你会调整窗口大小，高度自然需要自动生成。比如每行1/8 inch的高度，那么8行自动生成为1 inch，10行就是1.25。

* 历史问题

在IE6之前的微软的浏览器将元素的高/宽度属性包括了内容物高/宽度加上外边距和内边距的。另外ie也会应用高度和宽度到行内非替换元素上。

两个问题在ie6上解决了，但是你在quirk诡异模式上，仍然会看到。

--------------------------------

* 外边距vs内边距 margin vs padding

元素框之间有两种间隙，内边距（padding）和外边距（margin），内边距有背景（background）。你给一个元素一个内边距，可以发现背景颜色扩宽了。

-------------------------------

*  外边距

normal flow大多数元素的的间隔都是都是由外边距。设置外边距之后，在元素周围会出现空白（blank space），这个空白是指，其他的元素框（normal flow的）不能在这里出现，父级框的背景是可见的。

margin的值，可为auto，长度，百分数

将margin设置为auto的在第七章视觉格式化讨论过了。

margin可以设置为具体的长度，px、inch、 mm、em，默认的为0。很多浏览器的用户代理级的样式表会给一些元素定义外边距。

margin: top right bottom left

margin可以设置为百分数，在父级元素的宽度上计算。设置一个百分数的外边距，因为父级元素的宽度可能会变，比如调整窗口大小，外边距会跟着扩大或缩小。

不仅是左右的外边距，上下的外边距也是根据宽度计算的。因为高度常常为auto，上下边距会增加高度，按百分比计算的高度又需要增加，陷入循环。

** 重复的值

如果第四个值没有就赋值第二个值，如果第三个值没有就赋值第一个值，如果第二个值没有就赋值第一个值。

** 一边的外边距

margin-top/bottom/left/right

** 负值和塌陷的外边距

设置为负值的margin，元素框就可以超过父元素内容框了，如下图第二段落，或者覆盖其他元素框。