Почему между моим изображением и его ящиком есть разрыв? - PullRequest
9 голосов
/ 24 сентября 2008

Когда мой браузер отображает следующий тестовый пример, под изображением есть пробел. Из моего понимания 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 ]

19 голосов
/ 25 сентября 2008

Встроенные элементы выровнены по вертикали к базовой линии, а не к самой нижней части вмещающего блока. Это связано с тем, что тексту для спусков нужно небольшое пространство внизу - хвосты на буквах вроде строчных букв «p». Таким образом, есть воображаемая линия на небольшом расстоянии над дном, называемая базовой линией, и встроенные элементы по умолчанию выровнены с ней.

Есть два способа решения этой проблемы. Вы можете либо указать, что изображение должно быть выровнено по вертикали снизу, либо установить его как элемент блока, и в этом случае оно больше не рассматривается как часть текста.

В дополнение к этому в Internet Explorer есть ошибка синтаксического анализа HTML, которая не игнорирует конечные пробелы после закрывающего элемента, поэтому удаление этих пробелов может быть необходимо, если у вас возникают проблемы с совместимостью с Internet Explorer.

4 голосов
/ 24 сентября 2008

Поскольку изображение встроено, оно располагается на базовой линии. Попробуйте

vertical-align: bottom;

С другой стороны, в IE иногда, если у вас есть пробелы вокруг изображения, вы получаете это. Поэтому, если вы удалите все пробелы между тегами div и img, это может решить проблему.

3 голосов
/ 24 сентября 2008

line-height: 0; на родителе DIV исправляет это для меня. Предположительно, это означает, что высота строки по умолчанию не равна 0.

1 голос
/ 24 сентября 2008
display: block

в изображении также исправляет это, но, вероятно, ломает это другими способами;)

0 голосов
/ 25 сентября 2008

font-size:0; на родительском DIV - еще один хитрый способ исправить это.

0 голосов
/ 24 сентября 2008

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

Не знаю почему, но для Internet Explorer это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...