Почему изображение использует display: inline, но ведет себя как элемент inline-block - PullRequest
Новая
       16

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

5 голосов
/ 29 марта 2012

Почему стиль отображения по умолчанию для встроенного изображения вместо встроенного блока?

Есть ли какая-либо разница между встроенным и встроенным блоком для элементов img, из того, что я вижу, он ведет себя точно так же.

Ответы [ 6 ]

6 голосов
/ 02 апреля 2012

IMG является встроенным & Замененным элементом.

Заменяемым элементом является любой элемент, внешний вид и размеры которого определяется внешним ресурсом.

Согласно W3C

Элемент IMG не имеет содержимого; обычно это replaced inline изображение, обозначенное атрибутом src, исключение составляет левый или выровненные по правому краю изображения, которые «всплывают» из линии

Проверьте эту ссылку для более http://reference.sitepoint.com/css/replacedelements

3 голосов
/ 21 июля 2014

На первую часть вашего вопроса уже дан ответ, поэтому я не буду повторяться.

Что касается второй части, некоторые браузеры, такие как Firefox, отображают тег no-image img в виде промежутка, даже если атрибуты width и height указаны в CSS.

Вы можете попробовать это сами с этим HTML-кодом: 

<img alt='no image' src='about:blank'><br>
<img alt='no image' src='about:blank'id=iblock>

и соответствующий CSS: 

img {
    height: 100px;
    width: 100px;
    background: cyan;
}
#iblock {
    display: inline-block;
}

Или посмотрите разницу в эффекте рендеринга с помощью этой Демо на JsFiddle .

3 голосов
/ 05 апреля 2012

Таблицы стилей браузера по умолчанию изначально создавались с использованием CSS1 для HTML3.2 , поэтому встроенный блок был недоступен или не нужен. Там нет разницы между ними для элементов изображения.

Ссылки

1 голос
/ 02 апреля 2012

Это просто встроенный элемент, который поддерживает атрибуты измерения: Встроенный контент - элемент img .

1 голос
/ 29 марта 2012

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

Inline-block является более новымОбъявление CSS2 и не полностью реализованы в IE 6/7 .

1 голос
/ 29 марта 2012

Inline-block позволяет вам манипулировать внешним видом объекта с помощью стилевого моделирования (например, придания ему размеров), но позволяет сохранять выравнивание объекта встроенным, как текст.

...