CSS权威指南第五弹：内边距、边框和外边距

宽度和高度
1.一个元素的width被定义为从做内边界到右内边界的距离，height被定义为上边界到下边界的距离。
2.这两个属性很重要的一点是：它们不能应用到行内非替换元素。
3.如果在行内非替换元素声明了width和height,浏览器会忽略。

外边距 margin

值：<length> | <precentage> | auto | inherit

长度值与外边距
margin: top right buttom left 上右下左

百分数与外边距
对外边距的设置可以为百分数。百分数是相对于父元素的width计算的。这不仅应用于左右外边距，也应用于上下外边距。

值的复制
(1)如果外边距指定了三个值，则第二个值由第三个值复制
(2)如果给定了两个值，则第四个值根据第二个复制，第三个根据第一个复制
(3)如果给定了三个值，则剩下三个根据第一个复制

单边外边距属性
margin-top、margin-right、margin-bottom、margin-left

负外边距和外边距的合并
可以见上一节

外边距和行内元素
外边距还可以应用到行内元素，不过效果稍有不同。为行内替换元素设置margin-top,margin-bottom，并不生效。因为向一个行内非替换元素应用外边距，它对行高并没有影响。为行内替换元素设置margin-left,margin-right，会生效。行内替换元素又不同：为替换元素设置的外边距会影响行高，可能使行高增加或减少。所以margin-top,margin-bottom，margin-left,margin-right都会生效。

边框

边框和背景
背景值一定到边框

有样式的边框
border-style属性：

多种样式
边框的上下左右可以添加不同的样式

单边样式

边框宽度

以及

边框颜色

以及

透明边框
将颜色设置为transparent

简写边框与全局边框

边框与行高
边框不会影响行内元素的行高，见上一章

内边距

值：<length> | <precentage> | auto | inherit
1.默认的，元素没有内边距
2.可以为元素的内边距设置百分值，像外边距一样，百分数值要相对于其父元素的width计算。
3.如果为行内非替换元素设置了内边距，则左右内边距是生效的。
4.对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延伸。
5.对于行内替换元素，内边距都会生效。