"img" elements: Block level element or inline element?

Question

I've read somewhere that IMG elements behave like both. If correct, could someone please explain with examples?

Answer 1

Without trying to confuse you, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.

In CSS, you can set an element to display: inline-block to make it replicate the behaviour of images.

Images and objects are also known as "replaced" elements, since they do not have content per se, the element is essentially replaced by binary data.

Answer 2

IMG elements are inline, meaning that unless they are floated they will flow horizontally with text and other inline elements.

They are "block" elements in that they have a width and a height. But they behave more like "inline-block" in that respect.

Answer 3

An img element is a replaced inline element.

It behaves like an inline element (because it is), but some generalizations about inline elements do not apply to img elements.

e.g.

Generalization: "Width does not apply to inline elements"

What the spec actually says: "Applies to: all elements but non-replaced inline elements, table rows, and row groups "

Since an image is a replaced inline element, it does apply.

Answer 4

Click here to see various examples of how the IMG tag can be used.

Answer 5

For almost all purposes think of them as an inline element with a width set. Basically you are free to dictate how you would like images to display using CSS. I generally set a few image classes like so:

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