Почему между моим изображением и блоком, в котором оно находится, есть разрыв?
Когда мой браузер отображает следующий тестовый пример, под изображением появляется пробел. Насколько я понимаю CSS, нижняя часть синего поля должна касаться нижней части красного поля. Но это не так. Почему?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
<head><title>foo</title></head>
<body>
<div style = "border: solid blue 2px; padding: 0px;">
<img alt='' style = "border: solid red 2px; margin: 0px;"
src = "http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" />
</div>
</body>
</html>
Ответы 6
Поскольку изображение встроено, оно находится на базовой линии. Пытаться
vertical-align: bottom;
С другой стороны, в IE иногда, если у вас есть пробел вокруг изображения, вы его получаете. Поэтому, если вы удалите все пробелы между тегами div и img, это может решить эту проблему.
Удалите разрыв строки перед тегом, чтобы он следовал непосредственно за тегом без пробелов между ними.
Не знаю почему, но для Internet Explorer это работает.
display: block
на изображении это тоже исправляет, но, вероятно, ломает его другими способами;)
Может ли кто-нибудь проверить / оспорить, что это ломает другие вещи?
Это означает, что изображение будет действовать как блок, поэтому любые элементы, которые должны следовать за ним в строке, появятся в следующей доступной строке.
line-height: 0; на родительском DIV исправляет это для меня. Предположительно, это означает, что высота строки по умолчанию не равна 0.
Встроенные элементы выравниваются по вертикали по базовой линии, а не по самому низу содержащего поля. Это связано с тем, что под текстом нужно немного места для подстрочных элементов - хвостов на таких буквах, как строчная «p». Таким образом, есть воображаемая линия на небольшом расстоянии над дном, называемая базовой линией, и встроенные элементы по умолчанию выровнены по ней по вертикали.
Есть два способа решить эту проблему. Вы можете либо указать, что изображение должно быть выровнено по вертикали по нижнему краю, либо вы можете сделать его блочным элементом, и в этом случае оно больше не будет рассматриваться как часть текста.
В дополнение к этому в Internet Explorer есть ошибка синтаксического анализа HTML, которая не игнорирует конечные пробелы после закрывающего элемента, поэтому удаление этого пробела может потребоваться, если у вас возникли проблемы с совместимостью с Internet Explorer.
Это отвечает абсолютно на все, что меня интересовало. Прекрасная работа.
Через 7 лет это сэкономило мне много времени. Спасибо!
font-size:0; в родительском DIV - еще один хитрый способ исправить это.
Не могли бы вы немного подробнее объяснить свое первое предложение? Почему изображение, расположенное на базовой линии, вызывает разрыв и почему изменение его выравнивания по вертикали решает проблему?