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

Question

为什么图像内联的默认显示样式而不是内联块？

img元素的内联块和内联块之间是否有任何区别，我可以看到它的行为完全相同。

Answer 1

IMG是内联＆amp; 替换元素。

  

替换元素是其外观和尺寸为的任何元素   由外部资源定义。

根据W3C

  

IMG 元素没有内容;它通常是replaced inline   由src属性指定的图像，例外为left或   右对齐的图像是＆＃34;浮动＆＃34;不合时宜。

点击此链接可获取更多http://reference.sitepoint.com/css/replacedelements

Answer 2

默认的浏览器样式表最初是使用CSS1 HTML3.2创建的，因此内联块不可用或不必要。图像元素之间没有区别。

<强>参考

• CSS 1 Specification
• HTML 3.2 Specification

Answer 3

你问题的第一部分已经回答了，所以我不再重复了。

对于第二部分，即使在CSS中指定了width和height属性，某些浏览器（如Firefox）也会将无图像img标记呈现为范围。

您可以使用此HTML代码自行试用：

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

相应的CSS：

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

或者通过JsFiddle上的演示了解渲染效果的差异。

Answer 4

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

Answer 5

内联块与内联相同，除了它允许您调整块属性，如填充和边距。默认情况下，图像应该在文本中以文本形式流动，就像新闻文章中的图表一样，这就是为什么所有原始属性都与图像与文本流对齐的原因。

Inline-block是一个较新的CSS2声明，not fully implemented in IE 6/7。

Answer 6

它只是一个支持维度属性的内联元素：Embedded content - the img element。