Display Property Differences for Inline-*Something*

Display property differences for inline-*something*

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.

Everything concerning how the box lays out its contents is 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-block is converted to block, inline-table to table, inline-flex to flex, and inline-grid to grid. Again, this does not directly affect how an element's contents are formatted, not as far as the specifications go.

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

In CSS2.1, section 9.2.4 describes block and inline-block as follows:

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.

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 that block container box itself is either formatted as block-level, or inline-level.

There is one additional difference between block and inline-block: an inline-block box always establishes 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.

Section 17.2 describes table and inline-table as follows:

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

The Flexbox module describes flex and inline-flex as follows:

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.

And the Grid Layout module describes grid and inline-grid as follows:

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.

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.

What's the difference between display:inline-flex and display:flex?

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.¹

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.

It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inline and/or display: inline-block), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).

¹ _{The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flex unless you have a very good reason to display your flex container inline.}

CSS: Display Properties differences

Block elements will typically stack vertically whereas inline elements will line up horizontally.

Two Divs will stack on top of each other, but if you set them to display:inline, they will be next to each other horizontally. Vise-versa with Span tags.

What is the difference between block and inline-block with width: 100%?

What you said is pretty much correct: "an inline-block element seems to be able to do anything a block element can do, but with a little extra styling." This is mostly due to the fact that the one thing both have in common is the fact that they are both block containers.

However, there's a catch.

A block box participates in a block formatting context, and an inline-block participates in an inline formatting context (although it establishes a block formatting context for its descendants, just like a block box does under certain conditions). See section 9.4. Basically, this means an inline-block is treated as though it were text, which in turn means most properties that usually apply to text would also apply to an inline-block. These properties include text-indent, text-align and vertical-align, among others.

This can cause undesired side effects which you can easily prevent by not using display: inline-block in the first place. See this question for an interesting example of what can happen.

The box model for inline-blocks also differs somewhat from that of block boxes. Section 10 contains all the nitty gritty details, but the main differences are:

• Without the width: 100% declaration, as you may have suspected, an inline-block will shrink to fit its contents.

• Because an inline-block flows inline, you can't center it with auto left and right margins. You use text-align: center instead. It goes without saying that it must then be on its own line with no text surrounding it on the same line, but if you're setting width: 100% then this won't be a problem.

• Inline-blocks are never affected by margin collapse.

If you're trying to create a block-based layout, you should be using display: block. Generally speaking, when deciding between the two, you should always default to display: block, and only choose display: inline-block if you have a very good reason to (and no, blocking margin collapse is not what I would consider a good reason).

Block Level Element vs Block Formatting Context

Note that this answer uses the term "box" in lieu of "element", as CSS makes a distinction between elements and boxes. For the purposes of this answer, an HTML element is represented by a single box in CSS layout. In reality an element may generate any number of boxes (or none at all, as in display: none), but that's outside the scope of this question.

Can a HTML element be both a block level element and form a block formatting context?

Yes. The criteria in which a block box (i.e. a block-level block container box) may establish a BFC are stated in section 9.4.1 of CSS2.1, namely:

• floats,
• absolutely positioned elements, and
• "block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport)" (as directly quoted from the spec)

Does being a block level element imply that it forms a block formatting context, or conversely, does forming a block formatting context imply that it must be a block level element?

Neither:

1. The above answer implies that not all block boxes establish block formatting contexts. A block box with the CSS properties display: block; overflow: visible; float: none; position: static (or position: relative) does not establish a BFC.
2. Conversely, an inline-block is an example of a box that establishes a BFC, but is itself inline-level, not block-level.

In a similar vein, how does this translate to inline elements and elements that form an inline formatting context?

An inline box is an inline-level box whose contents participate directly in its parent's inline formatting context (see section 9.4.2). Notably, the only boxes that can establish inline formatting contexts are block container boxes.

The difference between an inline box and an inline-block is that an inline-block's contents participate in the BFC that it establishes, not in the parent's IFC. Instead, only the inline-block itself participates in its parent's IFC.

display: inline-block forces new line

In my opinion, floats are more suitable for this case.

#wrapper {  width: 100%;  overflow: hidden; /* more reliable way to contain floats                       by creating the isolated Block Formatting Context (BFC)                       more on this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */}.block {  display: block;  overflow: hidden; /* new BFC again, now to preven overlapping of regular and floating blocks */}.block_50x100 {  width: 50%;  padding-top: 100%;  background: #0f0;  float: left;}.block_50x50 {  width: 50%;  padding-top: 50%;  background: #00f;}.block_50x50+.block_50x50 {  background: #f00;}

<div id="wrapper">  <div id="b1" class="block block_50x100">  </div>  <div id="b2" class="block block_50x50">  </div>  <div id="b3" class="block block_50x50">  </div></div>