HTML: <img> блочный или строчный элемент – разбираемся

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

Стандартно элемент <img> является строчным и гармонично вплетается в текст вокруг. Желаете, чтобы он выделялся?

img {
  display: block; // Блок утверждает: "Ты многом можешь помочь", заявляя о своем содержимом.
}

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

Строчный или инлайн-блок: вот в чем вопрос!

Исходно элемент <img> гармонично сочитается с другими элементами, оставаясь строчным:

• Бесшовное слияние: он естественно вписывается в текст, действуя как ненавязчивый элемент, инициируя симпатии окружающих.
• Отсутствие отступов: новые строки при этом не появляются; абзацы здесь не прерываются.
• Горизонтальная ориентация: вертикальные отступы не работают; [margin: 0 auto;] заставляет изображение занять центральное положение.

Необходимо помнить, что <img> может выступить и в роли другого актёра! Примените силу CSS и задайте:

img.inline-block {
  display: inline-block; // .inline-block как бы предлагает: "Не делай со мной ничего плохого, я всего лишь скромная пограничная зона."
}

Теперь <img> может быть заметен, как блок, с чётко заданными шириной и высотой и подходящими для него отступами margin. Заметно, что в отличие от истинных блоковых элементов, она остаётся частью текстовой последовательности.

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

Как визуальный элемент, <img> выделяется ярко:

🔲➖➖➖🖼️➡️ Вписывается в строку. Строчный элемент гармонирует с текстом!
🔲➖➖➖

Трансформация происходит с помощью одной строки кода:

img {
  display: block; // .block звучит словно "Не обижайся на мою очаровательность."
}

🔲
🔲  🖼️   Приобрела статус блочного элемента. Требует больше места!
🔲

Изменения звучат как мелодия, где <img> играет на клавишах мощи CSS.

Стилизация: Оформляем тег <img>

✍️ Приглашаем вас на паркет бала маскарада:

• Широкий формат: Вам стеснено? Используйте max-width: 100%, height: auto, чтобы грациозно вписаться в любое пространство.

img.responsive {
  max-width: 100%;
  height: auto; // .auto словно говорит: "Один размер подходит всем. Забудь о тяжелых диетах!"
}

• Центровка: <img> может парить, как ангел, с display:block и margin:auto.

img.center {
  display: block;
  margin: auto; // .center назначает себя центром всех взоров.
}

• Плыть по течению: <img> может указать направление вправо или влево с помощью float:left/right.

img.left {
  float: left;
  margin-right: 20px; // .left заявляет: "Смотри, я умею плыть к берегу!"
}

img.right {
  float: right;
  margin-left: 20px; // .right восклицает: "И я могу плыть, только вот в другую сторону."
}

• Рамочные украшения: Обрамите <img> стильной, декоративной рамкой.

img.framed {
  border: 5px solid #333;
  padding: 4px; // .framed декларирует: "Вставьте меня в рамку немедленно!"
}

Хорошие практики: Изображения на диете и альт для дыхания

Рекомендации для совершенных и здоровых <img>:

• Отзывчивость: Подчеркните очертания ваших изображений и используйте max-width и height:auto.
• Свободное дыхание: Поддержите пользователей через ассистивные технологии, адекватно заполнив атрибут alt — это станет для них воздушной подушкой безопасности.
• Подписи к картинкам: Объедините <figcaption> и <figure> для получения чистых семантически и простых для аннотации изображений — у вашего <img> появится голос (и контекст!).

Подгоняем display для гардероба

Систематизация классов CSS для настройки отображения <img> обеспечивает эстетичность процесса стилизации:

img.rounded {
  border-radius: 50%; // .rounded словно говорит: "Смотрите, я круглая. И это привлекательно."
  display: inline-block;
}

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

1. HTML Standard – Авторитетный источник по элементу <img>.
2. MDN Web Docs: <img>: Элемент встраивания изображения – Глубокий разбор элемента <img>.
3. CSS-Tricks: display – Расшифровка тайн CSS display.
4. CSS display: inline vs inline-block – Stack Overflow – Обсуждение inline и inline-block сообществом.
5. HTML img tag – W3Schools – Исследование тега <img>.
6. CSS display Property – CSS Portal – Все, что нужно знать о свойстве display.
7. HTML – Blocks – TutorialsPoint – Блочное противостояние: версия HTML.