一个直观的答案

想象<span>元素在<div>中。例如，如果你给<span>元素一个100px的高度和一个红色的边框，它将看起来像这样

显示:内联

显示:inline-block

显示:块

代码:http://jsfiddle.net/Mta2b/

带有display:inline-block的元素类似于display:inline元素，但是它们可以有宽度和高度。这意味着您可以使用内联块元素作为块，同时在文本或其他元素中流动它。

支持的样式差异总结如下:

内联:只有左距、右距、左填充、右填充 内联块:边距，填充，高度，宽度

答案中没有提到的一件事是内联元素可以在行之间中断，而内联块不能(显然是阻塞的)!因此，内联元素可以用来设置文本语句和其中的块的样式，但由于它们不能填充，您可以使用行高代替。

<div style="width: 350px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div style="display: inline; background: #F00; color: #FFF"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <hr/> <div style="width: 350px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div style="display: inline-block; background: #F00; color: #FFF"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

显示:内联;是在句子中使用的显示模式。例如，如果你有一段话，想要突出一个词，你可以这样做:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<em>元素有一个显示:inline;默认情况下，因为这个标记总是在句子中使用。 <p>元素有一个display: block;默认情况下，因为它既不是一个句子，也不是在一个句子中，它是一个句子块。

具有display: inline的元素;不能有高度、宽度或垂直边距。具有display: block的元素;可以有宽度，高度和边距。 如果你想为<em>元素添加一个高度，你需要将这个元素设置为display: inline-block;。现在，您可以为元素和每个其他块样式(内联块的块部分)添加高度，但它被放置在句子中(内联块的内联部分)。

块-元素取完整宽度。所有属性的高度，宽度，空白，填充工作

内联元素根据内容取高度和宽度。高度，宽度，边距底部和边距顶部无效。填充和左右边距有效。示例span和anchor。

内联块- 1。元素不取完全宽度，这就是为什么它的名称中有*inline*。所有属性，包括高度，宽度，边缘顶部和边缘底部的工作。这也适用于块级元素。这就是为什么它的名字中有*block*。

行内元素

尊重他们的左右边距和填充。不是顶部/底部。 不能设置宽度或高度。 允许其他元素位于它们的左边和右边。

Inline-Block元素:

尊重所有方面的空白和填充。 可以设置宽度和高度。 允许其他元素坐在它们的左右。

块元素:

尊重所有方面的空白和填充 获取全宽度(如果宽度没有定义) 在它们之后强制换行

一个可视化的例子如下:

查看下面的代码片段以获得额外的可视化示例

.block{ background: green; width: 50px; height: 50px; margin-top: 10px; margin-bottom: 10px; display: block; } .inline-block{ background: green; width: 50px; height: 50px; margin-top: 10px; margin-bottom: 10px; display: inline-block; } .inline{ background: green; width: 50px; height: 50px; margin-top: 10px; margin-bottom: 10px; display: inline; } <div class="block"> block </div> <div class="block"> block </div> <div class="inline-block"> inline block </div> <div class="inline-block"> inline block </div> <div class="inline"> inline </div> <div class="inline"> inline </div>

以上所有答案都对原问题提供了重要信息。然而，有一种概括似乎是错误的。

可以将宽度和高度设置为至少一个内联元素(我能想到的)—<img>元素。

这里和这个重复的状态都接受了答案，这是不可能的，但这似乎不是一个有效的一般规则。

例子:

img { 宽度:200 px; 身高:200 px; 边框:1px纯红色; ｝ <img src="#" />

img具有display: inline，但其宽度和高度已成功设置。