内边距、边框和外边距

基本元素框

所有文档都生成一个矩形框，这成为元素框，它描述一个元素在文档布局所占的空间大小。因此，每个框影响着其他元素框的位置和大小。

宽度和高度

一个元素的width定义为从左内边界到右内边界的距离，height被定义为上边界到下内边界的距离。
注意：它们不能应用到行内非替换元素。例如，如果你想申明一个超链接的height的width，css兼容的浏览器必须忽略这些申明。

外边距和内边距

元素框在元素之间只提供了很少的空间。有3种方法可以在元素外围生成额外的空间“可以增加内边距，或者增加外边距。还可以同时增加内边距和外边距。某些情况下选择哪种方法并不重要。不过元素如果有背景，则会影响你的决定，因为背景会延伸到内边距，但不会延伸到外边距。

因此，为元素指定的内边距和外边距会影响元素的背景何时结束。如果为元素设置了背景色，则可以轻易看出它们的不同。

外边距

大多数正常流元素间出现的间隔都是因为存在元素外边距。设置外边距会在元素外创建额外的空白，空白通常指的是不能放其他元素区域，而且在这个区域中可以看到父元素的背景。设置外边距用margin

对元素外边距设置百分数值。百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生改变，百分数也会改变。