html - 为什么某些浏览器将格式化字符(如 CRLF)呈现为空格？

Question

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

你可以去http://www.dev12.com/CSSTest有关我的两个问题的实例。

问题 #1:Safari、Firefox 和 Opera 在容器 div 上呈现大约 6 像素的不需要的底部填充。如果我将 padding 显式设置为 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

Answer 1

#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>

您希望浏览器在“sentence”和“in”之间放置一个空格，对吗？ <img>元素是行内 block ，就像段落中的单词一样。