CSS Display Modes
Display modes change the way an element behaves in relation to the elements around it. Each display mode follows its own set of rules.
Every element in HTML has a default display mode. For example, paragraphs, divs, and the major semantic tags are block. Links and text related properties like em and strong are inline. Tables are table. List items have a display mode called list-item that triggers markers (bullets or numbers).
Of course, in many situations we'll need to change an element's display mode to make it behave a certain way for our desired layout.
This is just a quick introduction to some of the most common display properties. We'll cover some of these in much better detail individually.
Common Display Modes
Display: Block
The element spans the full width of its container unless explicitly told not to (e.g. using width). Multiple block elements naturally stack on top of one another.
Display: Inline
The element flows along the same baseline with other text, and may be broken onto a new line if necessary.
Display: Inline-block
Similar to inline except: the element can have margins and padding like block, and it can't be broken into multiple lines. The whole element will shift to a new line if there isn't room.
Display: Flex
The element becomes a flexbox container, automatically triggering special flex layout behaviors on the child elements.
Display: Grid
The element becomes a grid container, allowing child elements to be laid out on a two-dimensional grid.
Display: Table
The element itself behaves generally as a block element, but it sets up its children for special table related layout behaviors. Additional display modes on the child elements are needed for table rows, cells, etc.
Table related HTML elements already have these appropriate display modes set. You would only need these properties if making non-table elements act like a table.
Display: List-item
The element behaves mostly as block except that it generates a "marker box" for a bullet or number. It's pretty unusual to turn a non-list item into a list item, but since lists can be used for many things, it's fairly common to change or remove this styling.
Display: None
The element and all of its children are treated as if they don't exist. They are not displayed, and they do not take up any space in the layout. For toggling an element's visibility, also look at the properties visibility and opacity.
There's a figure here. Go ahead, you can find it using the dev tools.
Formatting Contexts
Some display modes trigger what's called a new formatting context.
The W3C spec actually explains this quite well:
A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules. For example, a flex formatting context lays out boxes according to the flex layout rules, whereas a block formatting context lays out boxes according to the block-and-inline layout rules.
Elements in one context have no affect on the position or behavior of elements in other contexts. The margins of items inside a flexbox for example won't overlap with margins outside the container since they're separate contexts. This will make more sense as we cover things like positioning rules, flexbox, and grid in more detail.