为什么图像使用显示：内联但行为类似于内联块元素

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

Answer 1

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 2

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 3

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 .

Answer 4

内联块允许您使用框模型样式（例如赋予其尺寸）来操纵对象的外观，但允许您使对象保持内联对齐，如文本。

Answer 5

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 6

它只是一个支持维度属性的内联元素： 嵌入式内容 - img元素 。