CSS display Property
The display property defines the type of box an element will generate and can be used to override the default box type that is displayed and from this the formatting of that box.
Possible Values
- block - the element will generate a block box.
- inline-block - the element will generate an inline-level block container - the inside of the element is formatted as a block box and the element itself is treated as an inline box.
- inline - the element will generate an inline box.
- list-item - displays as a list-item box with a marker box and an item box.
- none - the element doesn't generate a box and has no visible effect on the layout of the page.
- table - the element behaves like a
<table>element. - inline-table - generates a box as with a
<table>element but is part of the inline formatting context. - table-column - the element defines a column of cells - but doesn't generate a box and has no effect on layout as if it were set to none but can be used for styles.
- table-column-group - the element defines a group of columns but also doesn't generate a box or have any effect on layout. Can be used for styles.
- table-header-group - defines a table-header-group.
- table-footer-group - defines a table-footer-group.
- table-row - generates a box for a table row like the
<tr>element. - table-cell - generates a box for a table cell like the
<th>and<td>elements. - table-caption - generates a table-caption box the same as the HTML
<caption>element.
Code Example
ul.change li{display: inline;}
The above example will change the list items in the unordered list with the class name change from block level items to inline items.
Below is an example that changes the normal list display into an inline display. A normal <li> element generates a
block box for the element content and a marker box to hold the list marker. As each <li> element is a block it forces a break
and following elements are displayed on a new line.
This can be seen in the list below:
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
When we change the display property of <li> elements to
inline the marker box is no longer displayed and the line break no longer occurs because they are now formatted as inline elements. You can see
this in the list below which has the following style declaration:
ul.change li{display: inline;}
- Item One
- Item Two
- Item Three
- Item Four
- Item Five