3

我需要有人向我解释这些额外的填充来自于包含 img 元素的 div。

您可以访问http://www.dev12.com/CSSTest以获取我的两个问题的实时示例。

问题 #1：Safari、Firefox 和 Opera 在容器 div 上呈现大约 6 像素的不需要的底部填充。如果我明确地将填充设置为 0px 并不重要。

问题 #2：如果我格式化我的代码，使每个图像在我的 html 文件中单独的行上，则额外的 6 个像素的右填充被添加到每个图像。例如，以下代码块在两个图像之间呈现不需要的填充：

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

但是，此代码块没有不需要的空间：

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

显然 Safari、Firefox 和 Opera 将我在 span 标签之间的回车呈现为空白。我不记得以前有过这个问题。我正在 Textmate 中编写我的代码。有没有我应该查看的设置来防止这种情况发生？

我总是使用 XHTML 1.0 Strict 文档类型。这让我特别困惑，因为它是如此初级。有人帮我理解这一点！

KN

4

2 回答 2

9

#1这是因为内联图像的默认基线对齐方式 - 您看到的额外空间是为图像周围的文本中的下行字母（低于基线的字母：g、p、q、y 等）保留的。（您没有文本的事实无关紧要 - 仍然为它们保留空间。）

你可以像这样摆脱它：

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

#2换行符是空格，并显示为空格。如果你有这样的 HTML：

<p>This is a sentence
in a paragraph.<p>

您希望浏览器在“句子”和“输入”之间放置一个空格，不是吗？ <img>元素是内联块，就像段落中的单词一样。

于 2009-05-10T22:57:03.237 回答
3

如果我没记错的话，HTML 规范说源文件中的所有空格都将呈现为单个空格。

例如，如果您打开一个新的 HTML 文档并键入

hello
world

结果将是“hello world”

以下任何一项都会出现相同的结果：

hello


world

- - - 或者 - - - - - 

hello world

- - - 或者 - - - - - 

hello                                                 world

不管你在“hello”和“world”之间放了多少空格，只有一个会渲染。空格是 CRLF 还是空格字符都没有关系。

于 2009-05-10T22:57:55.137 回答