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

What is the difference between display: inline and display: inline-block?

提问by Logesh Paul

What exactly is the difference between the inlineand inline-blockvalues of CSS display?

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

回答by splattne

A visual answer

直观的答案

Imagine a <span>element inside a <div>. If you give the <span>element a height of 100px and a red border for example, it will look like this with

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

display: inline

显示：内联

display: inline-block

显示：内联块

display: block

显示：块

Code: http://jsfiddle.net/Mta2b/

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

Elements with display:inline-blockare like display:inlineelements, but they can have a widthand a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

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

Difference of supported styles as summary:

支持的样式差异总结：

• inline: only margin-left, margin-right, padding-left, padding-right
• inline-block: margin, padding, height, width

• 内联: 仅margin-left, margin-right, padding-left,padding-right
• 内联块: margin, padding, height,width

回答by Wouter J

display: inline;is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:

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

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

The <em>element has a display: inline;by default, because this tag is always used in a sentence. The <p>element has a display: block;by default, because it's neither a sentence nor in a sentence, it's a block of sentences.

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

An element with display: inline;cannothave a heightor a widthor a vertical margin. An element with display: block;canhave a width, heightand margin.
If you want to add a heightto the <em>element, you need to set this element to display: inline-block;. Now you can add a heightto the element and every other block style (the blockpart of inline-block), but it is placed in a sentence (the inlinepart of inline-block).

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

回答by Ali

One thing not mentioned in answers is inline element can break among lines while inline-block can't (and obviously block)! So inline elements can be useful to style sentences of text and blocks inside them, but as they can't be padded you can use line-heightinstead.

答案中没有提到的一件事是内联元素可以在行之间中断，而内联块不能（显然是阻塞）！因此，内联元素可用于设置文本句子和其中的块的样式，但由于它们无法填充，因此您可以改用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>

回答by alexandros84

All answers above contribute important info on the original question. However, there is a generalization that seems wrong.

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

It is possibleto set width and height to at least one inline element (that I can think of) – the <img>element.

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

Both accepted answers here and on this duplicatestate that this is not possible but this doesn't seem like a valid general rule.

此处和此重复声明都接受了答案，这表明这是不可能的，但这似乎不是有效的一般规则。

Example:

例子：

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

<img src="#" />

The imghas display: inline, but its widthand heightwere successfully set.

该img有display: inline，但它width并height已成功设置。

回答by OverCoder

splattne's answerprobably covered most of everything so I won't repeat the same thing, but: inlineand inline-blockbehave differently with the directionCSS property.

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

Within the next snippet you see one two(in order) is rendered, like it does in LTR layouts. I suspect the browser here auto-detected the English part as LTR text and rendered it from left to right.

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

However, if I go ahead and set displayto inline-block, the browser appears to respect the directionproperty and render the elements from right to left in order, so that two oneis rendered.

但是，如果我继续并设置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>

I don't know if there are any other quirks to this, I only found about this empirically on Chrome.

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