Школа
Веб-разработка

Откуда берётся отступ под картинкой и как его убрать?

Вроде это не padding и не margin…

V
12 сен 2024
👁 1741   🗩1
Веб-разработка

Откуда берётся отступ под картинкой и как его убрать?

Вроде это не padding и не margin…

V
12 сен 2024
👁 1741   🗩1
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Тег img по умолчанию считается строчным — то есть ведёт себя как слово в строке текста. В этом легко убедиться, положив маленькую картинку внутрь абзаца:

Выглядит странно, но такой уж ЦСС нам достался.

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

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

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

Чтобы убрать отступ, задайте картинке display: block; или другое не строчное значение. Обычно это делают сразу для всех картинок на сайте, потому что строчные картинки бывают нужны крайне редко.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы