Как ведет себя блочный img?

Question

[aliasst]

Если элементу img задать display:block, то картинка все равно не будет себя вести как блочный элемент.
Т.е. не будет например расширяться на всё доступное пространство, его ширина будет зависеть от содержимого. С чем это связано? Есть еще такие странные элементы?

Answer 1

[dom1n1k]

Видимо потому, что по спецификации дефолтное значение ширины у любого элемента (включая блоки) - auto, а отнюдь не 100%. У картинки auto свое, у текстового потока свое. Но никто не мешает прописать 100% вручную.

Answer 2

[Алексей Струков]

Она расширяется как-бы, но картинка это inline-replaced элемент, и она рисуется в соответствии со своими размерами, а остальное пространство забивается margin-ом.
Display: block не обозначает что элемент расширяется на всю ширину. Он занимает столько места, сколько внутри у него есть контента (или фиксированная ширина), а следующий за ним элемент переносится на новую строку.

Comments

[aliasst]

ну почему же, если например тегу span задать display:block; то span станет блоком и будет занимать все доступное пространство, если даже будет абсолютно пустым (без содержимого), а картинка как-то по другому себя ведет

[Алексей Струков]

aliasst: хотя да, согласен. Там видимо какие то нюансы есть с baseline. Но у картинок есть ширина и высота, даже если явно их не указать. Тут разница в типах контента inline-flow(вроде) у спана и inline-replaced у картинки