行内元素

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

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>

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

<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;。现在，您可以为元素和每个其他块样式(内联块的块部分)添加高度，但它被放置在句子中(内联块的内联部分)。

行内元素

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

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>

splattne的答案可能涵盖了大部分内容，所以我不会重复同样的事情，但是:内联和内联块在CSS属性direction方面的表现不同。

在下一个代码片段中，您将看到一个两个(按顺序)被呈现，就像在LTR布局中一样。我怀疑这里的浏览器自动将英语部分检测为LTR文本，并从左向右呈现。

身体{ text-align:正确; 方向:rtl; ｝ h2 { 显示:块;/*只是显式的*/ ｝ 跨度{ 显示:内联; ｝ < h2 > هذا عنوان طويل < span > < /一个span > < span > < /两个跨度> < / h2 >

但是，如果我继续将显示设置为内联块，浏览器似乎会尊重direction属性，并按照从右到左的顺序呈现元素，因此会呈现两个1。

身体{ text-align:正确; 方向:rtl; ｝ h2 { 显示:块;/*只是显式的*/ ｝ 跨度{ 显示:inline-block; ｝ < h2 > هذا عنوان طويل < span > < /一个span > < span > < /两个跨度> < / h2 >

我不知道是否还有其他的怪癖，我只是在Chrome上发现了这个。

一个直观的答案

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

显示:内联

显示:inline-block

显示:块

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

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

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

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

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

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

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

例子:

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

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