CSS 显示 inline-*something* 的属性差异

Display property differences for inline-*something*

提问by NBeers

I noticed that people covered specifics of some display properties in a 1:1 comparison, but there are quite a few that have not been covered in illustrating the differences. Could someone explain the differences between the various inline-somethingdisplay tags?

我注意到人们在 1:1 的比较中涵盖了一些显示属性的细节，但在说明差异时还有很多没有涉及。可能有人解释各种inline-之间的差异的东西显示标签？

A more elaborated definition over places like w3schools would do wonders.

对像 w3schools 这样的地方进行更详细的定义会产生奇迹。

回答by BoltClock

The only difference, for any display type that has block and inline variants, is that the inline-*display type has the box laid inline (i.e. in an inline formatting context) while the other has the box formatted as a block-level box, subject to most of the same formatting conventions as other block-level elements in a block formatting context. The difference between a block-level box and an inline-level box is covered in depth elsewhere.

对于具有块和内联变体的任何显示类型，唯一的区别是inline-*显示类型将框放置在行内（即在内联格式上下文中），而另一种将框格式化为块级框，受大多数与块格式化上下文中的其他块级元素具有相同的格式化约定。块级框和内联级框之间的区别在别处有深入介绍。

Everything concerning how the box lays out its contentsis pretty much the same (the specifics of which, of course, are governed by the display type itself); any other nuanced differences would have been stated explicitly in the spec. As far as I'm aware, there are in fact no such differences.

关于盒子如何布置其内容的一切都几乎相同（当然，其细节由显示类型本身决定）；任何其他细微差别都会在规范中明确说明。据我所知，实际上没有这样的差异。

When in doubt, prefer block-level display types. If you find yourself asking whether inline-level is appropriate, chances are the answer is no. Certain scenarios may prevent a box from ever being formatted as an inline-level box anyway, such as absolute positioning or floating, or being formatted as a flex item or grid item instead. The result is a direct conversion from the inline-*variant to its usual block variant. That is, inline-blockis converted to block, inline-tableto table, inline-flexto flex, and inline-gridto grid. Again, this does not directly affect how an element's contentsare formatted, not as far as the specifications go.

如有疑问，请首选块级显示类型。如果您发现自己在问内联级别是否合适，答案很可能是否定的。某些情况可能会阻止一个框无论如何都被格式化为内联级框，例如绝对定位或浮动，或者被格式化为一个弹性项目或网格项目。结果是从inline-*变体直接转换为其通常的块变体。即，inline-block被转换为block，inline-table对table，inline-flex对flex，和inline-grid到grid。同样，这不会直接影响元素内容的格式，就规范而言。

Examples of each display type and its inline-level counterpart follow.

每种显示类型及其内联级对应物的示例如下。

---

---

In CSS2.1, section 9.2.4describes blockand inline-blockas follows:

在CSS2.1，第9.2.4节描述block和inline-block如下：

block
This value causes an element to generate a block box.

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

block
这个值导致一个元素生成一个块框。

inline-block
该值使元素生成内联级块容器。行内块的内部被格式化为块框，元素本身被格式化为原子行级框。

Note that "block box" is a shorthand for "block-level block container", and a block container is something that can contain block-level boxes.

请注意，“块框”是“块级块容器”的简写，块容器是可以包含块级框的东西。

You can see that both of these two values cause an element to generate a block container box, in which its contents will always follow the same set of formatting rules, but thatblock container box itself is either formatted as block-level, or inline-level.

你可以看到，无论这两个值导致元素生成一个块容器盒，其中，其内容将始终遵循相同格式规则的，但该块容器盒本身，即格式化为块级或inline-等级。

There is one additional difference between blockand inline-block: an inline-block box alwaysestablishes a new block formatting context; block boxes only do so under a set of conditions. This does not hold true for any of the other display types that have block-level and inline-level counterparts.

block和之间还有一个额外的区别inline-block：内联块框总是建立一个新的块格式上下文；块框只在一组条件下这样做。这不适用于具有块级和内联级对应物的任何其他显示类型。

Section 17.2describes tableand inline-tableas follows:

17.2描述table和inline-table如下：

table (In HTML: TABLE)
Specifies that an element defines a block-level table: it is a rectangular block that participates in a block formatting context.

inline-table (In HTML: TABLE)
Specifies that an element defines an inline-level table: it is a rectangular block that participates in an inline formatting context).

table（在 HTML 中：TABLE）
指定一个元素定义一个块级表：它是一个参与块格式化上下文的矩形块。

inline-table（在 HTML 中：TABLE）
指定一个元素定义一个内联级表：它是一个参与内联格式上下文的矩形块）。

The Flexbox moduledescribes flexand inline-flexas follows:

该Flexbox的模块描述flex和inline-flex如下：

flex
This value causes an element to generate a block-level flex container box.

inline-flex
This value causes an element to generate an inline-level flex container box.

flex
该值使元素生成块级 flex 容器框。

inline-flex
该值使元素生成内联级弹性容器框。

And the Grid Layout moduledescribes gridand inline-gridas follows:

而网格布局模块描述grid和inline-grid如下：

grid
This value causes an element to generate a block-level grid container box.

inline-grid
This value causes an element to generate an inline-level grid container box.

grid
该值使元素生成块级网格容器框。

inline-grid
该值使元素生成内联级网格容器框。

Again, in all of these scenarios, a table, a flex container, or a grid container will behave exactly the same way whether it is block-level or inline-level. A flex container always establishes a flex formatting context for its flex items, and a grid container always establishes a grid formatting context for its grid items.

同样，在所有这些场景中，无论是块级还是内联级，表、弹性容器或网格容器的行为方式都完全相同。弹性容器总是为其弹性项目建立一个弹性格式化上下文，而网格容器总是为其网格项目建立一个网格格式化上下文。