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 回答