Почему у моего изображения есть место под ним?

Изображения получают таинственное пустое пространство внизу, даже если padding:0;margin:0 применяются.

Красная рамка должна обнимать изображение, но на нижней стороне есть пространство.

Что вызывает это, и как я могу удалить это пространство?

Ответ 1

Изображения (и элементы встроенного блока в целом) обрабатываются как символ.

Таким образом, они подчиняются правилу базовой линии.

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

Но некоторые буквы, такие как p, q, j и т.д., имеют хвосты, которые опускаются ниже базовой линии. Чтобы предотвратить столкновение этих хвостов с буквами на следующей строке, пространство зарезервировано между базовой линией и нижней строкой.

Эта диаграмма иллюстрирует различные строки, используемые текстом:

(Изображение из WHATWG)

Итак, изображение выровнено по отношению к базовой линии, даже если текст отсутствует. К счастью, исправление очень просто:

img {vertical-align:bottom}

Это приведет к выравниванию изображения в нижней части строки, а также удалению тайного пространства.

Просто будьте осторожны, если ваше изображение мало (меньше высоты линии), вы можете начать видеть пространство загадок, появляющееся над изображением. Чтобы исправить это, добавьте line-height:1px в элемент контейнера.

Надеюсь, это поможет многим людям, которых я видел, спрашивать об этом и подобных проблемах.

Ответ 2

Изменение img на элемент уровня блока

img {
  display: block;
}

также удалит пространство под изображением.

Ответ 3

проверить этот CSS jsfiddle CSS

div {border:1px solid red;width:100px;line-height:0}
img {width:100px;}