Решение проблемы: 3px отступ у img в HTML5 с doctype

Быстрый ответ

Чтобы избавиться от неожиданного нижнего отступа в 3px у тега <img>, следует применить к его свойству display значение block или использовать vertical-align: bottom;. Такие стили CSS исключают нежелательное пространство под элементами, предназначенное обычно для подстрочных символов.

img { display: block; } /* Таким образом устраняем нижний отступ */
/* или */
img { vertical-align: bottom; } /* Впрочем, так тоже работает */

Если интересно узнать, почему так происходит, стоит отметить, что по умолчанию изображения в HTML воспринимаются как инлайновые элементы, аналогично тексту. Браузеры оставляют место внизу для букв с 'хвостиками', например, 'g' или 'y'.

Стратегии применения свойства display

Блочное отображение: просто, но эффективно

Превращение изображения в блочный элемент с помощью display: block надежно устраняет нежелательные отступы:

img { display: block; } /* Блочное отображение борется с отступами! */

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

Подробнее об этом расскажет наш спикер на видео

Отображение inline-block: лучшее из двух миров

Применение display: inline-block также позволяет решить проблему, соединяя преимущества инлайнового и блочного отображения:

img { display: inline-block; } /* Гармония противоположностей */

Такое свойство позволяет изображению легко вписываться в поток документа, приводя к ряду преимуществ, и в то же время избавляет от лишнего отступа.

Адаптация вертикального выравнивания

Свойство vertical-align отлично подходит для точной регулировки положения элементов по вертикали. Установка его в middle может решить проблему с лишним отступом:

img { vertical-align: middle; } /* Вертикальное выравнивание под контролем */

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

Баланс между line-height и vertical-align

Тонкий подход с line-height

Точная регулировка line-height со значением 0 позволяет исключить все дополнительные отступы под изображением:

img { line-height: 0; } /* Ноль лишнего */

Эффект от line-height зависит от свойств родительского блока.

Золотое правило: vertical-align: middle

Применение vertical-align: middle в сочетании с display: table для контейнера div помогает устранить все лишние отступы:

div { display: table; }
img { vertical-align: middle; } /* Четкое совмещение */

Такая комбинация идеально подходит для размещения изображений внутри блока без лишнего пространства.

Распространенные препятствия: типичные ситуации

Дилемма doctype

Изменение декларации doctype может влиять на визуальное отображение веб-страницы. При переходе на doctype HTML5 важно перепроверить стили на наличие неожиданных изменений.

Загадка обтекания

При использовании обтекания для вложенных изображений, желательно задать display: block, чтобы избежать неожиданных отступов:

img { display: block; } /* Обтекание без подводных камней */

Удивляющие изменения... в прямом смысле

Если после установки display: table для контейнера div возникает проблема с высотой, стоит применить свойство vertical-align для улучшения навигации и читаемости кода:

div { display: table; }
img { vertical-align: middle; } /* Вертикальное выравнивание во всей красе */

Визуализация

Смотрите на тег изображения (<img>) как на лодку 🚤, а на контейнер div — как на причал 🚢:

🚤 Лодка (img): идет к причалу (div)
🚢 Причал (div): надежный и стабильный

Скрытый отступ можно сравнить с внезапной волной 🌊, которая осложняет стыковку лодки:

🚤🌊🚢

Решение с использованием display: block позволяет "лодке" идеально пристыковаться к "причалу":

img {
  display: block; /* Волны уходят */
}

После применения этого изменения, "лодка" (изображение) без особых проблем пристыкуется в "причалу" (div):

🚤🚢 (Нет волн – нет проблем)

Примеры конкретных решений

Специфические сценарии и line-height:

Иногда установка line-height, равной высоте изображения или блока, может дать нужный результат. Это особенно актуально, когда применение vertical-align не помогает:

img { line-height: 3; }

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

Изучение моделей поведения и адаптивность

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

Полезные материалы

1. MDN Web Docs: <img>: Элемент встраивания изображения — Детальная информация о теге img.
2. Stack Overflow: Изображение внутри div имеет дополнительное пространство снизу — Обобщенные подходы к решению проблем со свойством img.
3. HTML Стандарт — Спецификация элемента <img> в мире HTML.
4. Элементы figure & figcaption | HTML5 Doctor — Обзор элементов <figure> и <figcaption>, призванных придать семантическую структуру изображениям.