Display, a property to control the layout

Display is a command for the layout of a page or a page element, it dramatically affects the way the components are displayed on the page.

display:none

The element to which this directive applies is not displayed. We can show it dynamically by changing the value of the attribute, for example:

display:inline

To remove an item from the display with no effect on the layout, the visibility property must be used instead:

visibility:hidden

And visibility:visible to show the element.

display: inline

The default value. The element is shown in the flow, with no line break.

When you assign to the li tag the property inline, the elements of a list will appear one after another and not one below the other. li has the default property display:list-item.

Example:

<ul>
  <li style="display:inline">one</li>
  <li style="display:inline">two</li>
</ul

• one
• two

<ul>
  <li style="display:list-item">un</li>
  <li style="display:list-item">deux</li>
</ul

• one
• two

Markers are removed with display:block.

display:list-item

Displays a list, add a line break after the element and a marker ahead. The marker and the element are in inline succession.

display:block

A newline is generated before the display of the element, and after. The element functions as a box.
So if you put into it, a tag with the style clear:both, the separation only applies to inner elements, while in inline mode, it applies to part of the entire page.

display:inline-block

The item is a box, but itself is inserted into the flow in inline mode, without line break.

display:table

Displays the elements in a tabular fashion. You can assign contained components the style of elements of a table: table-column, table-row, table-cell, etc.. See documentation below.
This mode is best suited when the style is applied to a container whose elements are organized in table with the appropriate styles.

display: inherit

The display mode will be the same as the container.

References: The display property in CSS 2.1.

• Embellish the H1 tag in pure CSS
  The difference between the block and inline display property are highlighted in different ways to give a background image to a tag, in this case the page title tag.