Лишнее место под IMG

Иногда под IMG "вдруг" появляется лишнее место. Посмотрим на эти грабли внимательнее, почему такое бывает и как этого избежать. [cut]

Демонстрация проблемы

Например:

<style> * { margin: 0; padding: 0; } </style>
<table>
  <tr>
  <td style="border:1px red solid">
    <img src="square.png">
  </td>
  </tr>
</table>

[iframe src="inline"]

Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить "хвосты" букв.

Вот так выглядит та же картинка с выступающим вниз символом рядом: [iframe src="inline-p"]

В примере картинка обёрнута в красный TD. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг IMG будет другой элемент с явно указанным размером, "облегающий" картинку по высоте. Браузер постарается зарезервировать место под IMG, хотя оно там не нужно.

Решение: сделать элемент блочным

Самый лучший способ избежать этого -- поставить display: block таким картинкам:

<style> 
  * { margin: 0; padding: 0; }
*!*
  img { display: block }
*/!*
</style>
<table>
  <tr>
  <td style="border:1px red solid">
    <img src="square.png">
  </td>
  </tr>
</table>

[iframe src="block"]

Под блочным элементом ничего не резервируется. Проблема исчезла.

Решение: задать vertical-align

А что, если мы, по каким-то причинам, не хотим делать элемент блочным?

Существует ещё один способ избежать проблемы -- использовать свойство vertical-align.

Если установить vertical-align в top, то инлайн-элемент будет отпозиционирован по верхней границе текущей строки.

При этом браузер не будет оставлять место под изображением, так как запланирует продолжение строки сверху, а не снизу:

<style> 
  * { margin: 0; padding: 0; }
*!*
  img { vertical-align: top}
*/!*
</style>
<table>
  <tr>
  <td style="border:1px red solid">
    <img src="square.png">
  </td>
  </tr>
</table>

[iframe src="valign"]

А вот, как браузер отобразит соседние символы в этом случае: p<img src="square.png">p

[iframe src="valign-p"]

С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:

Например, для <img src="square.png" style="height:10px">:

[iframe src="valign-small"]

Таким образом, требуется уменьшить еще и line-height контейнера. Окончательное решение для маленьких изображений с vertical-align:

<style> 
  * { margin: 0; padding: 0; }
*!*
  td { line-height: 1px }
  img { vertical-align: top }
*/!*
</style>
<table>
  <tr>
  <td style="border:1px red solid">
    <img src="square.png" style="height:10px">
  </td>
  </tr>
</table>

Результат:

[iframe src="valign-small-lh"]

Итого

Пробелы под картинками появляются, чтобы оставить место под "хвосты" букв в строке. Строка "подразумевается", т.к. `display:inline`.
Можно избежать пробела, если изменить `display`, например, на `block`.
Альтернатива: `vertical-align:top` (или `bottom`), но для маленьких изображений может понадобиться уменьшить `line-height`, чтобы контейнер не оставлял место под строку.

5.1 KiB Raw Blame History Unescape Escape

Лишнее место под IMG

Демонстрация проблемы

Решение: сделать элемент блочным

Решение: задать vertical-align

Итого

5.1 KiB

Raw Blame History