What is the CSS display property and can you give a few examples of its use?
Tags: css, html, webdev, beginners
Published: 2022-06-25 05:51:12

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](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
2. [Inline formatting contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts#inline_formatting_contexts)
3. [Box generation](https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#box_generation)