Why does image use display: inline but behaves like an inline-block element

Question

Why is the default display style for image inline instead of inline-block?

Is there any difference between inline and inline-block for img elements, from what I can

Answer 1

It's simply an inline element that supports dimension attributes: Embedded content - the img element.

Answer 2

IMG is an Inline & Replaced element.

A replaced element is any element whose appearance and dimensions are defined by an external resource.

As per W3C

The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.

Check this link for more http://reference.sitepoint.com/css/replacedelements

Answer 3

Inline block is the same as inline, except for it allows you to adjust block properties such as padding and margin. By default, images are supposed to semantically flow with text like a diagram in a news article, that is why all the original attributes are to do with aligning the image with the text flow.

Inline-block is a newer CSS2 declaration, and not fully implemented in IE 6/7.

Answer 4

The default browser stylesheets were initially created using CSS1 for HTML3.2, so inline-block was not available or necessary. There's no difference between them for image elements.

References

• CSS 1 Specification
• HTML 3.2 Specification

Answer 5

Inline-block allows you to manipulate the object's appearance with box-model styling (such as giving it dimensions), but allows you to keep the object aligned inline, like text.

Answer 6

The first part of your question is already answered, so I shall not repeat.

For the second part, some browsers like Firefox renders a no-image img tag as a span even when width and height attributes are specified in CSS.

You can try it out yourself with this HTML code:

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

And corresponding CSS:

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

Or see the difference in rendering effect with this Demo on JsFiddle.