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

Question

CSS display 的 inline 和 inline-block 值之间到底有什么区别？

Answer 1

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。
如果要在<em> 元素中添加height，则需要将此元素设置为display: inline-block;。现在您可以将height 添加到元素和所有其他块样式（inline-block 的block 部分），但它被放置在一个句子中（inline-block 的inline 部分）。

Answer 2

视觉答案

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

显示：内联

显示：内联块

显示：阻止

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

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

支持样式的差异总结：

• 内联：仅margin-left、margin-right、padding-left、padding-right
• 内联块：margin、padding、height、width

Answer 3

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

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

Answer 4

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

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

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

例子：

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

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

Answer 5

splattne's answer 可能涵盖了大部分内容，所以我不会重复同样的事情，但是：inline 和 inline-block 在 direction CSS 属性中的行为不同。

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

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

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

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

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

Answer 6

方块 - 元素 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.

Answer 7

内联元素

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

内联块元素：

1. 尊重所有边的边距和内边距。
2. 可以设置宽度和高度。
3. 允许其他元素位于其左右两侧。

块元素：

1. 尊重所有边的边距和内边距
2. 获取全角（如果未定义宽度）
3. 在它们之后强制换行

一个视觉示例如下所示：

查看下面的 sn-p 以获得额外的可视化示例

.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>