内边距和行内元素

对于网站建设中的行内元素，外边距和内边距存在一个重要的区别。为说明这一点，下面先来看左右内边距。如果为左右内边距设置了值，左右内边距将是可见的：

strong{padding-left:10px;padding-right:10px;background:silver;}

注意，行内非替换元素的两端都出现了额外的空背景。这是所设置的内边距。像外边距一样，左内边距应用到元素的开始处，右内边距应用到元素的最后，不过，内边距不会应用到各行的左右两边。对于替换元素也是如此，不过当然这种元素不会跨行。

理论上，对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延伸：

strong{padding-top:0.5em;background-color:silver;}

当然，行高没有改变，不过由于内边距确实能延伸背景，所以背景应该可见，是这样吗？不错，背景确实可见，它与前面的行重叠，这正是我们期望的结果。

内边距和替换元素

尽管看上去可能有些奇怪，不过确实可以向替换元素应用内边距，但在写作本书时这方面还存在一些限制，最让人奇怪的是，可以向图像应用内边距，如下：

img{background:silver;padding:1em;}

不论替换元素是块级元素还是行内元素，内边距都会围绕其内容，背景色将填入该内边距，如图8-45所示。还可以看到内边距会把元素的边框推离其内容。

不过，在网页设计中，关于如何对表单元素（如input）设置样式还存在一些混淆。例如，复选框的内边距在哪里就不是很清楚。因此，在写作本书时，有些浏览器（如Mozilla）会忽略表单元素的内边距（或其他形式的样式）。可能将来会出现一个网站建设规范描述表单元素的样式。

另一个可能的限制是，很多较老的浏览器不向图像应用内边距，包括Windows平台的IE5。

小结

能够向所有元素应用外边距、边框和内边距，是网站建设超越传统Web标记语言的要素之一。过去，如果要把一个标题放在一个有边框的有色方框中，就意味着要把这个标题包围在一个表中，只是为了创建如此简单的效果，这么做确实是一种很笨拙的办法。正是这种强大的功能使得CSS如此流行。