Почему форматирующие символы, такие как CRLF, отображаются некоторыми браузерами как пробелы?

Question

Мне нужно, чтобы кто-нибудь объяснил мне, откуда берется это дополнительное заполнение в divs, содержащих элементы img.

Вы можете пойти в http://www.dev12.com/CSSTest для живых примеров моих двух проблем.

Проблема № 1:Safari, Firefox и Opera отображают примерно 6 пикселей нежелательного нижнего заполнения в div контейнера.Не имеет значения, если я явно установил отступ в 0 пикселей.

Проблема № 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.Это особенно сбивает меня с толку, потому что это настолько элементарно.Кто-нибудь, помогите мне понять это!

КН

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>

вы бы ожидали, что браузер поставит пробел между "предложением" и "в", не так ли? <img> элементы - это встроенные блоки, точно так же, как слова в абзаце.

Answer 2

Если я правильно помню, в спецификациях HTML говорится, что все без исключения пробелы в исходном файле будут отображаться как один пробел.

Например, если вы откроете новый HTML-документ и введете

hello
world

Результатом будет "привет, мир".

Тот же результат появится для любого из следующих:

hello


world

------ или ----------

hello world

------ или ----------

hello                                                 world

Независимо от того, сколько пробелов вы поставите между "hello" и "world", будет отображаться только один.Не имеет значения, является ли пробел символом CRLF или пробелом.