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

Question

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

Answer 1

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

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

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

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

Answer 2

Элементом img является replaced inline element.

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

например.

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

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

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

Answer 3

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

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

Answer 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;}

Answer 5

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