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

Question

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

Answer 1

视觉答案

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

显示：内联

显示：内联块

显示：块

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

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

支持样式的差异总结：

• 内联：只有margin-left, margin-right, padding-left,padding-right
• 内联块: margin, padding, height,width

Answer 2

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;默认有a，因为它既不是句子也不是句子中的，它是一个句子块。

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

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>元素。

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

例子：

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

<img src="#" />

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

Answer 5

splattne 的回答可能涵盖了大部分内容，所以我不会重复同样的事情，但是：inline并且与CSS 属性inline-block的行为不同。direction

在您看到的下一个片段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

内联元素

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

内联块元素：

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

块元素：

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

一个视觉示例如下所示：

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

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

Answer 7

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