display: inline 和 display: inline-block 有什么区别？

视觉答案

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

显示：内联

https://i.stack.imgur.com/Emf0B.png

显示：内联块

https://i.stack.imgur.com/1vbks.png

显示：块

https://i.stack.imgur.com/IPf9Q.png

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

带有 display:inline-block 的元素类似于 display:inline 元素，但它们可以有 width 和 height。这意味着您可以将 inline-block 元素用作块，同时在文本或其他元素中流动它。

支持样式的差异总结：

内联：只有 margin-left、margin-right、padding-left、padding-right

内联块：边距、填充、高度、宽度

---

display: inline; 是在句子中使用的显示模式。例如，如果您有一个段落并且想要突出显示一个单词，您可以这样做：

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

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

具有 display: inline; 不能的元素具有 height 或 width 或垂直 margin。具有 display: block; 的元素 可以 具有 width、height 和 margin。
如果您想将 height 添加到 <em> 元素，您需要将此元素设置为 display: inline-block;。现在您可以将 height 添加到元素和每个其他块样式（inline-block 的 block 部分），但它被放置在一个句子中（inline-block 的 inline 部分）。

---

答案中没有提到的一件事是 inline 元素可以在行之间中断，而 inline-block 不能（并且显然是阻塞）！因此，内联元素对于设置文本句子和其中的块很有用，但由于它们不能被填充，您可以使用 line-height 代替。

---

https://i.stack.imgur.com/xXdn3.png

---

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

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

此处和 this duplicate 上接受的答案都表明这是不可能的，但这似乎不是一个有效的一般规则。

例子：

img { 宽度：200px;高度：200px；边框：1px 纯红色； }

img 有 display: inline，但其 width 和 height 已成功设置。

---

splattne's answer 可能涵盖了大部分内容，因此我不会重复相同的内容，但是：inline 和 inline-block 的行为与 direction CSS 属性不同。

在下一个片段中，您会看到 one two（按顺序）被渲染，就像在 LTR 布局中一样。我怀疑这里的浏览器自动将英文部分检测为 LTR 文本并从左到右呈现。

正文 { 文本对齐：右；方向：rtl； } h2 { 显示：块； /* 只是显式 */ } span { display: inline; }

هذا عنوان طويل 一个 两个

但是，如果我继续将 display 设置为 inline-block，浏览器似乎尊重 direction 属性并按从右到左的顺序呈现元素，从而呈现 two one。

正文 { 文本对齐：右；方向：rtl； } h2 { 显示：块； /* 只是显式 */ } span { display: inline-block; }

هذا عنوان طويل 一个 两个

我不知道这是否还有其他怪癖，我只是在 Chrome 上凭经验发现了这一点。

---

内联元素

尊重他们的左右边距和填充。不适用于顶部/底部。无法设置宽度或高度。让其他元素坐在它们的左右两侧。

内联块元素：

尊重所有边的边距和填充。可以设置宽度和高度。允许其他元素坐在它们的左右两侧。

块元素：

尊重所有边的边距和填充获取全宽（如果未定义宽度） 在它们之后强制换行

一个视觉示例如下所示：

https://i.stack.imgur.com/PoAVt.png

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

.block{ 背景：绿色；宽度：50px；高度：50px；边距顶部：10px；边距底部：10px；显示：块； } .inline-block{ 背景：绿色；宽度：50px；高度：50px；边距顶部：10px；边距底部：10px；显示：内联块； } .inline{ 背景：绿色；宽度：50px；高度：50px；边距顶部：10px；边距底部：10px；显示：内联； }

---

块 - 元素 take complete width.All properties height , width, margin , padding work

内联 - 元素 take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.

内联块 - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.

---