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

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

```html
<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` таким картинкам:

```html
<!--+ no-beautify -->
<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](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align).

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

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

```html
<!--+ no-beautify -->
<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`:

```html
<!--+ no-beautify -->
<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]

## Итого

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