CSS细节复习笔记——内边距、边框和外边距

一个元素的内边距、边框和外边距属性会影响着整个文档如何布局，更重要的是，它们会严重影响给定元素的外观。

高度和宽度

这两个属性不能应用到行内非替换元素，其高度和宽度由链接的内容确定，而不是由创作人员确定。正常流中的元素很少有设定的高度。

外边距和内边距

如果元素有背景，则会影响使用内边距和外边距，因为背景会延伸到内边距中，但不会延伸到外边距。为元素指定的内边距和外边距会影响元素的背景何时结束。

为内容区的个边增加10像素空白，margin:10px，类似于html的hspace和vspace，设置一个图像周围的额外空间。margin遵循一下模式：

margin：top right bottom left。这些值自上而下围着元素顺时针旋转，如果想呈现你想要的效果，就必须正确安排值的顺序。当其中一个值缺省的时候，将会按照以下规则：

1）如果缺少左外边距的值，则使用右外边距的值。

2）如果缺少下外边距的值，则使用上外边距的值。

3）如果缺少右外边距的值，则使用上外边距的值。

换句话说，如果为外边距指定3个值，则第4个值将会从第2个复制得到。如果给定两个值，第4个值会从第2个值复制得到，第3个值会从第1个值得到。

单边外距属性，对于margin:auto auto auto 3em;等同于margin-left:3em;可以使用单一的margin-top、margin-right、margin-bottom和margin-left单一设置外边距。

上小节讨论过”负外边距和合并外边距“的规则：正常流中垂直相邻块级元素外边距会合并。但是当外边距应用到行内非替换元素，她对行高没有任何影响。由于外边距实际上是透明的，所以这个声明没有任何视觉效果，原因在于行内非替换元素的外边距不会改变一个元素的行高。

但是注意，行内非替换元素之前的字的结尾与行内元素背景的边界之间有额外的一个空间。如果愿意可以在行内元素的两端都增加这个额外的空间：

<p style="font-size:12px;line-height:14px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="margin:25px;background:silver">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

效果如下：

如果向行内非替换元素应用负外边距，情况会更有意思。元素的上下外边距不受影响，行高也不会受影响，不过元素的左右两端可能与其他内容重叠。

替换元素有所不同：为替换元素设置的外边距确实会影响行高，可能会使行高增加或减少，这取决于上下外边距的值。行内替换元素的左右外边距与替换元素的左右外边距的作用一样。

边框

每个边框都有3个方面：其宽度或粗细、其样式或外观，以及其颜色。边框的默认样式是none，不一定能看到边框。默认的边框颜色是元素本身的前景色，如果没有为边框声明颜色，它将与元素文本颜色相同。

边框的样式

如果一个边框没有样式，就要没有宽度，不过有些情况下你可能向创建一个不可见的边框。这就引入了边框颜色transparent，这个值用于创建有宽度的不可见边框。这种透明边框相当于内边距，因此元素的背景会延伸到边框区（假设有可见的背景）。

百分数值和内边距

可以为元素的内边距设置百分数值。向外边距一样，百分数值要相对于其父元素的width计算，所以如果父元素的width改变，它们也会改变。

注意，上下内边距与左右内边距一直；也就是说，上下内边距会相对于父元素的宽度计算，而不是相对于高度。