Является ли <img> уровень блока элемента или встроенный уровень?

163

Я где-то читал, что <img>элемент ведет себя как оба. Если правильно, может кто-нибудь объяснить с примерами?

html css image understack
источник

Ответы:

189

Это правда, они оба - или, точнее, они являются элементами «встроенного блока». Это означает, что они текут как текст, но также имеют ширину и высоту, как блочные элементы.

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

Изображения и объекты также известны как «замененные» элементы, так как они сами по себе не имеют содержимого, элемент по существу заменяется двоичными данными.

* Обратите внимание, что браузеры технически используют display: inline(как видно из инструментов разработчика), но они уделяют особое внимание изображениям. Они все еще следуют всем чертам inline-block.

DisgruntledGoat
источник
Я всегда читал, что изображения являются встроенными элементами, а не встроенными блоками, но имеет смысл, что они будут встроенными блоками, благодаря возможности добавлять ширину и высоту.
Донато
22
Этот ответ не является технически правильным. Точнее говоря, imgэлементы не являются, inline-blockно на самом деле inlineэлементами. Вы можете проверить это в современном браузере, щелкнув правой кнопкой мыши на изображении, нажав «Проверить элемент», а затем просмотрев вычисленный стиль, который отобразится display: inline. Внутри тега нет контекста блока, поэтому вызывать его некорректно inline-block. Для получения дополнительной информации о замененных встроенных элементах см . Ответ Квентина и эту статью MDN .
Максимилиан Ломейстер
@ Макс. Эта ссылка ничего не говорит о том, что заменяемые элементы являются встроенными.
Рассерженная шлюха
@DisgruntledGoat Ссылка, которую я разместил, не говорит о том, что imgэлементы встроены - инструменты разработчика Google Chrome показывают imgэлементы как встроенные. Этот пост - единственное место, которое я нашел до сих пор, где говорится, что они есть inline-block. Интересно, что я не нашел ни одного авторитета, который бы сказал, что они inlineтоже. Может быть, как лечить тег зависит от реализации?
Максимилиан Ломейстер
2
@Max В соответствии с этим , замененные элементы находятся за рамками модели форматирования CSS. Ничто в спецификациях HTML или CSS не указывает, что изображения встроены. Поэтому независимо от того, что говорит браузер, изображения обрабатываются в точности так, как они были установлены display:inline-block.
Рассерженная шлюха
53

imgЭлемент является заменить встроенный элемент .

Он ведет себя как встроенный элемент (потому что он есть), но некоторые обобщения о встроенных элементах не применяются к imgэлементам.

например

Обобщение: «Ширина не относится к встроенным элементам»

Что в действительности говорится в спецификации : «Применяется ко всем элементам, кроме незаменяемых встроенных элементов, строк таблицы и групп строк»

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

Quentin
источник
13

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

Они являются «блочными» элементами в том смысле, что они имеют ширину и высоту. Но они ведут себя больше как «встроенный блок» в этом отношении.

Робусто
источник
7

Почти для всех целей думайте о них как о встроенном элементе с установленной шириной. По сути, вы можете сами определять, как изображения должны отображаться с помощью CSS. Я обычно устанавливаю несколько классов изображений примерно так:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}
Монтана Флинн
источник
2

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

Аватар
источник
0

Это правда, они оба - или, точнее, они являются элементами «встроенного блока». Это означает, что они текут как текст, но также имеют ширину и высоту, как блочные элементы.

Модасер Садат
источник