Почему символы форматирования, такие как CRLF, отображаются в некоторых браузерах как пробельные символы? - PullRequest
Новая
       18

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

2 голосов
/ 11 мая 2009

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

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

Задача № 1 : Safari, Firefox и Opera отображают примерно 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 doctype. Это особенно смущает меня, потому что это так элементарно. Кто-нибудь, помогите мне понять это!

KN

Ответы [ 2 ]

9 голосов
/ 11 мая 2009

# 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> элементы являются встроенными блоками, как слова в абзаце.

3 голосов
/ 11 мая 2009

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

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

hello
world

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

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

hello


world

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

hello world

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

hello                                                 world

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

...