What is the CSS display property and can you give a few examples of its use?

In CSS, the display property defines the outer and inner display types of an element. It plays an important role in generating boxes in the layout generation step of the Critical Rendering Path.

The display property sets two values: the outer display and the inner display.

The outer display value defines how an element interacts in the normal flow with respect to its neighbors. In contrast, the inner display sets the formatting context and flow layout of its children, i.e. how its children will be laid out and interact with each other.

There are many ways an element and its children can be laid out. Most notable ones are inline, block, inline-block, table, flex, inline-flex and grid. We'll consider inline and block display types here.

Inline Elements
Inline elements, such as <img> or <span> have their display set to inline by default. Both the outer and inner display types of an inline element is inline. This makes them part of the normal flow of the document and create an Inline Formatting Context (IFC), which means their children follow the layout rules of IFC.

<span> nodes, for example, follow the rules of Inline Formatting Context. In an IFC, elements are arranged in the same line till there is enough space. A new line is added when the combined width of the nodes exceeds the container's width. A very important distinction in IFC is that, vertical margins and paddings are not applied. In the following code,

span {
  margin: 20px 10px;
  padding: 20px 10px;
}

vertical margins and paddings of 20px will be totally ignored because vertical margins and paddings disrupt the line spacing of inline elements.

We can turn an inline element into a block element by explicitly setting its display to block. This is useful when we want to move an image to its own block.

img {
  display: block;
}

Block Elements
Block elements have both their display type values set to block. Like inline elements, they are also part of the normal flow, but their children obey Block Formatting Context (BFC) rules.

A block element, by default, comes with one line break before and after itself, its height set to the height of its children by a value of auto and occupies the entire width of its container. Paddings, borders and margins apply in all four sides. It has the same behavior applied to its children.

Generally, block elements are used as containers for other block elements and inline elements. For example, the <p> element is a block element and is intended to contain inline elements, like <span> tags, <quote> tags, text nodes, etc.

Inline elements inside a block element follow the normal flow according to the Block Formatting Context. In normal flow, inline elements form an Inline Formatting Context. So, the following paragraph:

<p>
  This is a paragraph with
  <span>some dummy content inside a span</span>
  . And another
  <span>span to just to make a point</span>.
</p>

with a style:

p {
  padding: 20px;
  margin: 10px;
  border: 1px solid gray;
}

span {
  padding: 20px;
  margin: 10px;
  border: 1px solid gray;
}

will have its paddings, borders and margins applied to all four sides of the paragraph area, according to BFC. However, vertical paddings and margins of the span tags (20px and 10px respectively for each top and bottom edges) will be ignored, as applied by Inline Formatting Context.

---

References

1. Display
2. Inline formatting contexts
3. Box generation