Чи рівень блоку елементів <img> чи рівень вбудованого?

163

Я десь читав, що <img>елемент поводиться як обидва. Якщо це правильно, чи міг би хтось пояснити прикладами?

html css image

— чувак
джерело

189

Це правда, вони обоє - або точніше, вони є елементами "вбудований блок". Це означає, що вони протікають в формі, як текст, але також мають ширину та висоту, як елементи блоку.

У CSS ви можете встановити елемент, щоб display: inline-blockвін повторював поведінку зображень *.

Зображення та об'єкти також відомі як "замінені" елементи, оскільки вони самі по собі не мають змісту, елемент по суті замінюється двійковими даними.

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

— Невдоволений козак
джерело

Я завжди читав, що зображення є вбудованими елементами, а не вбудованими блоками, але має сенс, що вони були б вбудованими, завдяки можливості додавання ширини та висоти.

— Донато

22

Ця відповідь технічно не є правильною. Точно кажучи, imgелементи не є, inline-blockа фактично inlineелементами. Ви можете перевірити це в сучасному браузері, клацнувши правою кнопкою миші зображення, клацнувши «Перевірити елемент», а потім переглянути обчислюваний стиль, який відображатиметься display: inline. Всередині тегу не відбувається контекст блоку, тому його неправильно називати inline-block. Для отримання додаткової інформації про замінені вбудовані елементи див . Відповідь Квентіна та цю статтю MDN .

— Максиміліан Ламестер

@Max, яке посилається, нічого не говорить про вбудовані замінені елементи.

— НезадоволенняЗакриття

@DisgruntledGoat Посилання, яке я опублікував, не говорить про те, що imgелементи вбудовані - інструменти для розробників Google Chrome показують imgелементи як вбудовані. Ця публікація є єдиним місцем, яке я знайшов поки що, що говорить, що вони inline-blockзамість них Цікаво, що я не знайшов жодного авторитету, який би сказав, що вони inlineтеж є . Як, можливо, трактувати залежність від використання тегів?

— Максиміліан Ламестер

2

@Max Відповідно до цього , замінені елементи виходять за межі моделі форматування CSS. Ніщо в специфікаціях HTML або CSS не вказує, що зображення є вбудованими. Тож незалежно від того, що в браузері йдеться, це зображення трактується точно так, як було встановлено display:inline-block.

— НезадоволенняЗачеп

53

imgЕлемент є замінити вбудований елемент .

Він поводиться як вбудований елемент (тому що він є), але деякі узагальнення щодо вбудованих елементів не стосуються imgелементів.

напр

Узагальнення: "Ширина не застосовується до вбудованих елементів"

Що насправді говорить специфікація : "Застосовується до: всіх елементів, але не замінених вбудованих елементів, рядків таблиці та груп рядків"

Оскільки зображення є заміненим вбудованим елементом, воно застосовується.

— Квентін
джерело

13

Елементи IMG є вбудованими, тобто, якщо вони не плаваються, вони будуть текти горизонтально з текстом та іншими вбудованими елементами.

Вони є "блоковими" елементами тим, що мають ширину і висоту. Але в цьому відношенні вони поводяться більше, як "inline-block".

— Робусто
джерело

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

Це правда, вони обоє - або точніше, вони є елементами "вбудований блок". Це означає, що вони протікають в формі, як текст, але також мають ширину та висоту, як елементи блоку.

— Модасер Садат
джерело