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

Question

CSS inline的{​​{1}}和inline-block值之间究竟有什么区别？

Answer 1

视觉答案

想象一下<span>中的<div>元素。如果您为<span>元素指定高度为100px且红色边框，例如，它将如下所示

显示：内嵌

显示：内联块

显示：阻止

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

display:inline-block元素与display:inline元素类似，但它们可以具有宽度和高度。这意味着您可以在文本或其他元素中使用内联块元素作为块。

支持的样式与摘要的区别：

• 内嵌：仅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;，因为它既不是句子也不是句子，而是句子块。

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

Answer 3

答案中没有提到的一点是内联元素可以在行间断开而内联块不能（并且明显阻塞）！因此，内联元素可用于设置文本和块内部句子的样式，但由于它们无法填充，因此您可以使用 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都接受了答案，声明这是不可能的，但这似乎不是一个有效的一般规则。

示例：

$('#plot_marker')

$('.plot_marker')

img { width: 200px; height: 200px; border: 1px solid red; }有<img src="#" />，但其img和display: inline已成功设置。

Answer 5

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

在下一个代码段中，您将看到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属性，并按从右到左的顺序渲染元素，这样{{ 1}}呈现。

two one

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

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

span {
  display: inline-block;
}

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

Answer 6

通常，我们使用这两个属性来允许其他元素左右放置，但这有一些区别，下面将对此进行解释。

显示：内联

内联元素在其相邻元素之前和之后都没有换行符，并且允许在其旁边添加HTML。

1. 允许填充的所有方面
2. 仅允许页边距的左侧和右侧，而不允许顶部和底部
3. 您无法设置其元素的宽度和高度
4. 尊重其他元素左右坐坐

显示：行内屏蔽

内联块元素作为内联元素放置（与相邻内容位于同一行）。它看起来像一个内联元素，但实际上它的作用就像一个块元素，不会强制换行。

1. 允许填充和边距的所有方面
2. 您可以设置其元素的宽度和高度
3. 尊重其他元素左右坐坐

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.