display: inline 和 display: inline-block 有啥区别？

Posted 2023-02-21

【中文标题】display: inline 和 display: inline-block 有啥区别？

【英文标题】：What is the difference between display: inline and display: inline-block?display: inline 和 display: inline-block 有什么区别？

【发布时间】：2012-02-16 16:04:11

【问题描述】：

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

【参考方案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 部分）。

【讨论】：

很好的答案！ tl;dr - 如果你想调整 inline 元素的大小，你可以使用 inline-block 作为显示类型。

小修正：内联元素可以有水平边距（右、左），但没有垂直边距（上、下）

很好的答案，因为您提到了在选择 display 值之一时我们可以/不能做的事情。

【参考方案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

【讨论】：

伟大的直觉。那么唯一的区别就是不能设置内联元素的height属性？

@user2316667 和宽度

@user2316667 和@OscarCalderon：此外，内联元素不关心垂直边距和填充，并且下一个元素将放置在同一行（之后没有换行符）。像p、div 这样的块元素得到一个完整的宽度线（强制换行），但尊重宽度/高度和所有水平/垂直填充/边距。 inline-block 元素的行为与 block 相同，但没有整个换行符（其他元素可以放在它们旁边）

padding-top 和 padding-right 也会影响内联元素的显示效果，造成一些混乱。

@manuman94 不，不是那个意思。所有不同的显示类型都有用例。

【参考方案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>

【参考方案4】：

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

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

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

例子：

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

<img src="#" />

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

【讨论】：

实际上，img-tag 的默认显示值是 display-inline。这就是为什么可以设置宽度和高度的原因。

img 是一个内联元素--> developer.mozilla.org/en-US/docs/Web/html/Inline_elements... 所以基本上你所说的或多或少与我所说的完全一样，而你却投反对票？？

不，我不是。 img-tags 是一个“替换元素”，基本上意味着内容被替换，因此它的行为就像一个内联块元素。是的，实际的默认属性（浏览器计算的属性是内联的）。但唯一的原因是因为 inline-block 直到 CSS2 才引入，因为它是一个“行为类似于 inline-block 元素的内联元素”，因为它被其内容所取代。即您没有为元素设置高度/宽度，而是在其内容上设置它 - 奇怪，是的。我知道。 drafts.csswg.org/css2/conform.html#replaced-element

你所说的其实很有趣。给我一些时间来研究和重新编辑，也许可以收回反对票和赞成票..！说到底，我真的觉得这次讨论有助于整个辩论的完整性。

【参考方案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 上凭经验发现的。

【参考方案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.

【参考方案7】：

内联元素

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

内联块元素：

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

块元素：

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

一个视觉示例如下所示：

查看下面的 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>