行内元素

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

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

一个直观的答案

想象<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>

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和anchor。

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