6

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 see it behaves exactly in the same way.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
jontro
  • 10,241
  • 6
  • 46
  • 71
  • Have you checked this link?It may help you [http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element][1] [1]: http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element – NewUser Apr 02 '12 at 08:06
  • historical reasons? backward compatibility? who knows.. – Aprillion Apr 02 '12 at 08:43

6 Answers6

6

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

sandeep
  • 91,313
  • 23
  • 137
  • 155
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

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
4

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.

Question Overflow
  • 10,925
  • 18
  • 72
  • 110
1

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.

Rodik
  • 4,054
  • 26
  • 49
  • I know what the difference between inline and inline-block is. The question is why image elements behaves the same way when setting it to inline-block if there is a difference. In my logic setting width and height would not work if it is display:inline – jontro Mar 29 '12 at 15:14
  • Nice read, this gives some more insight. I am still curios about more information on the subject. – jontro Mar 29 '12 at 15:22
  • Another weird thing is that if you set float: left on an image it changes to display: block automatically, at least in chrome – jontro Mar 29 '12 at 15:32
  • @jontro: That is intended and standard behavior, but it doesn't have anything to do with images being replaced inline elements. – BoltClock Apr 02 '12 at 07:55
1

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.

Dunhamzzz
  • 14,682
  • 4
  • 50
  • 74
  • The question actually relates to the really strict mode / html5. I still can set margins even though image is by default inline – jontro Mar 29 '12 at 15:17
  • Your first sentence isn't quite accurate. Margins and padding are applicable to both inline elements and inline block elements, but they are laid out in a different way with respect to their siblings and parents. – BoltClock Apr 02 '12 at 07:58
1

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

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73