有了以上了解，看上去向行内替换元素应用外边距、边距和内边距似乎很简单。
网页设计中内边距和边框像平常一样应用到替换元素，内边距在具体内容外插入空间，边框围绕着内边距。这个过程的不寻常之处在于，内边距和边框确实会影响行框的高度，因为它们要作为行内替换元素的行内框的一部分（不同于行内非替换元素）。考虑图7-45，这是由以下样式得到的：
img (height: 20px; width: 20px;)
img.one (margin: 0; padding: 0; border: 1px dotted;)
img.two (margin: 5px; padding: 3px; border: 1px solid;)
注意，第一个行框的高度足以包含这个图像，第二个行框的高度则足以包含图像、其内边距和边框。
外边距也包含在行框中，不过外边距有自己的问题。网页设计中设置正外边距没有什么特殊的地方，只是使替换元素的行内框更高。设置负外边距也有类似的效果：这会减少替换元素行内框的大小，可以看到，负的上外边距会把图像上面的一行向下拉：
img.two {margin-top:-10px;}
当然，负外边距对块级元素有也同样的作用。在这种情况下，负外边距会使替换元素的行内框小于正常大小。负外边距是使行内替换元素挤入其他行的唯一办法。
你现在可能注意到了，默认地，行内替换元素位于基线上，如果向替换元素增加下内边距、外边距或边框，内容区会上移。转换元素并没有自己的基线，所以相对来讲最好的办法是将其行内框的底端与基线对齐。因此，实际上是下外边距边界与基线对齐，如图7-47所示。
网页设计中这种基线对齐会有一个意想不到（而且不受欢迎）的后果：如果一个表单元格中只有一个图像，这个图像要让表单元格足够高，从而能把包含该图像的行框包含在内。即使没有具体的文本，甚至没有空白符，包含图像的表单元格中还是会出现这种大小调整。因此，已经使用多年的分片图像和间隔GIF设计在现代浏览器中可能表现很糟糕。考虑以下最简单的情况：
td {font-size: 12px;}
<td><img src ="spacer.gif" height="1" width="10 "></td>
在CSS行内格式化模型中，表单元格将是12像素高，图像位于单元格的基线上。所以图像下面可能有3像素的空间，上面有8像素的空间，不过具体的距离要取决于所用的字体系列及其基线的位置。这种行为并不仅限于表单元格中的图像，只要一个行内替换元素是块级元素或表单元格元素中的唯一后代，都会有这种行为。例如，div中的一个图像也会放在基线上。
注意：写作本书时，许多浏览器实际上会忽略这个网站建设CSS行内格式化模型，不过基于Gecko的浏览器在显示XHTML和严格的HTML文档时确实会像上面那样做。更多相关信息请参考我的文章《Images, Tables, and Mysterious Gaps》(hllp://developer.moziUa.org/en/docs/ Images,_Tables,_and_Mysterious_Caps)。
对于这种情况，网站建设最常用的解决方法是使间隔图像成为块级元素，这样它们就不会生成行框。例如：
td {font-size: 12px;}
img.block {display: block;}
<td><img src="spacer.gif" height="1" width="10" class="block"></td>
另一个可取的修正办法是，将包含图像的表单元格的font-size和line-height都设置为1px，这会使行框的高度只能放下1像素的图像。
行内替换元素位于基线上还有一个有意思的效果：如果应用一个负的下外边距，元素实际上会被向下拉，因为其行内框的底端将比其内容区的底端高。因此，以下规则会得到如图7-48所示的结果：
p img [margin-bottom:-10px;}
这很可能使得一个替换元素挤进后面的文本行。
警告：有些浏览器只是把内容区的底端放在基线上，而忽略负的下外边距。