#display

The element is completely removed, as if it wasn't in the HTML code in the first place.

The element is turned into an inline element: it behaves like simple text.

Any height and width applied will have no effect.

The element is turned into a block element: it starts on a new line, and takes up the whole width.

The element shares properties of both an inline and a block element:

• inline because the element behaves like simple text, and inserts itself in a block of text
• Block because you can apply height and width values

For example, this element has:

.element{
  height: 3em;
  width: 60px;
}

The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.

The element behaves like a table: <table>.

Its content and child elements behave like table cells.

The element behaves like a table cell: <td> or <th>.

Its content and child elements behave like table cells.

The element behaves like a table row: <tr>.

Its content and child elements behave like table cells.

The element is turned into an flexbox container. On its own, it behaves like a block element.

Its child elements will be turned into flexbox items.

The element shares properties of both an inline and a flexbox element:

• inline because the element behaves like simple text, and inserts itself in a block of text
• flexbox because its child element will be turned into flexbox items

For example, this element has:

.element{
  height: 3em;
  width: 120px;
}

The element is turned into an grid container. On its own, it behaves like a block element.

Its child elements will be turned into grid items.

The element shares properties of both an inline and a grid element:

• inline because the element behaves like simple text, and inserts itself in a block of text
• grid because its child element will be turned into flexbox items

For example, this element has:

.element{
  height: 3em;
  width: 120px;
}