行内元素

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

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>

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

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

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

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

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

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

例子:

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

img具有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>

一个直观的答案

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

显示:内联

显示:inline-block

显示:块

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

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

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

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

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上发现了这个。