Skip to content

Latest commit

 

History

History
146 lines (110 loc) · 5.23 KB

article.md

File metadata and controls

146 lines (110 loc) · 5.23 KB
Raw

Лишнее место под 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" height=80]

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

Вот так выглядит та же картинка с выступающим вниз символом рядом:

[iframe src="inline-p" height=80]

В примере картинка обёрнута в красный 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" height=80]

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

Решение: задать 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" height=80]

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

[iframe src="valign-p" height=80]

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

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

[iframe src="valign-small" height=80]

Таким образом, требуется уменьшить еще и 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" height=80]

Итого

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