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

Что значит строчный элемент и как img вписывается

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

Но есть подвох: img ближе к inline-block, потому что может иметь заданные width и height. Это позволяет ему растягиваться, не ломая поток текста. Представьте текст с иконкой — всё на одной строке, без лишних отступов снизу. Если вставить img в div или p, оно подстроится под контейнер.

Однако без CSS иногда появляется нежелательный отступ в 3-5 пикселей под изображением — это как пробел после слова. В блочном контейнере такого нет. Логично перейти к свойствам и примерам.

• Поток текста: img не прерывает строку, текст обтекает его.
• Размеры: атрибуты src, width, height работают сразу, без CSS.
• Вложение: img можно класть в div (блочный) или span (строчный), но не наоборот.

Как img ведёт себя в реальной верстке: примеры проблем

В практике img часто вызывает сюрпризы. Например, в списке ul/li картинка встанет inline и текст её обтечет, если не указать display: block. Это полезно для иконок, но для баннера — минус: снизу висит отступ. Я видел, как дизайнеры часами борются с этим в галереях.

Другой случай: img внутри p. Текст идёт слева или справа, если задать float. Без float — всё в ряд. Но если img широкий, он вылезет за пределы, потому что строчный элемент игнорирует полную ширину родителя. Чтобы исправить, меняем на block или inline-block.

Тестировал на простом коде: <p>Текст <img src="icon.png" alt="Иконка"> текст</p> — всё на строке. Добавьте <img style="width: 200px;"> — и overflow. Логичный шаг — способы контроля через CSS.

• Отступ снизу: решается vertical-align: bottom; или display: block;.
• Центрирование: для inline — text-align: center;, для block — margin: 0 auto;.
  Важно: img не поддерживает псевдоэлементы ::before/::after.

Меняем поведение img: от inline к block и inline-block

По умолчанию display: inline для img, но легко переключить. Хотите блочный? img { display: block; } — картинка займёт всю ширину, начнёт с новой строки, примет margin auto для центрирования. Идеально для hero-изображений.

Inline-block даёт лучшее: display: inline-block; — размеры уважаются, элементы в ряд, vertical-align работает. В галерее это must-have: фото рядом, переносятся при узком экране. Плюс, белые края между ними фиксятся font-size: 0 на родителе.

Пример кода: .gallery img { display: inline-block; width: 200px; margin: 10px; }. Работает везде, от Chrome до Safari. Не забудьте alt — для доступности и SEO.

• display: block: Полная ширина, новая строка, все отступы.
• display: inline-block: Рядом + размеры, vertical-align: middle;
• flex/grid: Современный способ — родитель flex, img внутри растёт.

Нюансы img в Flexbox и Grid — что меняется

В Flexbox или Grid img теряет строчность: ведёт себя как block. Контейнер .flex { display: flex; } заставит img заполнять flex-item. Можно задать flex-grow, align-self — гибкость на уровне.

Например, галерея: <div class="grid"> <img> <img> </div> с display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));. Img автоматически подстроится, без inline-трюков. Плюс responsive: srcset + sizes для разных экранов.

Но в старом IE flex не тянет, fallback на inline-block. Тестируйте кроссбраузер.

• Flex: img { flex: 1; object-fit: cover; } — заполнение без искажений.
• Grid: Авто-размножение колонок, img растёт.
  object-fit: contain/cover — ключ для responsive img.

Практика показывает: img эволюционирует с CSS

Разобрались: img стартует как строчный с чертами inline-block, но CSS даёт полный контроль. От простого display до flex/grid — выбор за задачей. Осталось углубиться в SVG внутри img или lazy loading для скорости.

Подумайте о picture вместо img для art direction. Или WebP для оптимизации — это следующий уровень верстки.