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.


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


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


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.


  <li style="display:inline">one</li>
  <li style="display:inline">two</li>
  <li style="display:list-item">un</li>
  <li style="display:list-item">deux</li>

Markers are removed with display:block.


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


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.


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


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.

© 2009-2022 Xul.fr