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

Ответ 1

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

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

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

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

Ответ 2

Элемент img - это replaced inline element.

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

например.

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

Что спецификация фактически говорит: "Применяется к: всем элементам, но не замененным встроенными элементами, строками таблицы и группами строк" ​​

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

Ответ 3

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

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

Ответ 4

Почти все цели предполагают их как встроенный элемент с установленной шириной. В принципе, вы можете диктовать, как вы хотите, чтобы изображения отображались с помощью 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;}

Ответ 5

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