CSS: Display Property
CSS display
property lets you control layout.
It is one of the most powerful property for layout, but is complex to understand.
Here is the basics.
There are 2 major types of “rendering box” for a HTML element:
- block
-
The element will create a newline, above it and below it. Example:
h1
,div
,p
,pre
. - inline
-
The element will flow. Example:
span
,strong
(bold),a
(anchor/link)
Simple Example
Here is a example of changing list items as inline.
Here is a list, without style:
- one
- two
- three
<ul> <li>one</li> <li>two</li> <li>three</li> </ul>
Here is the same list, but each li
set to display:inline
:
- one
- two
- three
<ul> <li style="display:inline">one</li> <li style="display:inline">two</li> <li style="display:inline">three</li> </ul>
What is Rendering Box Type?
The details are fairly complex, but basically it's like this.
Each element, has a “rendering box type”. It determines 2 things:
- How it is positioned with respect to its neighbor elements. example: block level (like a paragraph
p
), inline (like a boldb
word in a sentence.), table (like block but width does not span the window width, it's shrink wrapped to the table's content's width, which is automatically computed by default.), and others. - How its children elements behave. example:
table
,ul
(list), their child elements all have special type of rendering box.
Display Property Values
Here is complete list of values for display
.
⭐ means it's not widely supported by browsers yet.
display-outside
These controls their layout with respect to neighbor elements.
display: block
-
Like HTML
div
display: inline
-
Like HTML
b
.height
andwidth
have no effect. - ⭐
display: run-in
-
show either as
block
orinline
, depending on the element before and after.
display-legacy
display: inline-block
-
inline-level block container.
height
andwidth
works. display: inline-table
- inline-level table
display: inline-flex
- inline-level flex container
display: inline-grid
- inline-level grid container
display-inside
These controls the layout of their child elements.
- ⭐
display: flow
- ⭐
display: flow-root
display: table
-
Like HTML
table
display: flex
- as block-level flex container
display: grid
- as block-level grid container
- ⭐
display: ruby
- ⭐
display: subgrid
display-outside and display-inside
- ⭐
display: block flow
- ⭐
display: inline table
- ⭐
display: flex run-in
display-listitem
display: list-item
-
Like HTML
li
- ⭐
display: list-item block
- ⭐
display: list-item inline
- ⭐
display: list-item flow
- ⭐
display: list-item flow-root
- ⭐
display: list-item block flow
- ⭐
display: list-item block flow-root
- ⭐
display: flow list-item block
display-internal
display: table-row-group
-
Like HTML
tbody
display: table-header-group
-
Like HTML
thead
display: table-footer-group
-
Like HTML
tfoot
display: table-row
-
Like HTML
tr
display: table-cell
-
Like HTML
td
display: table-column-group
-
Like HTML
colgroup
display: table-column
-
Like HTML
col
display: table-caption
-
Like HTML
caption
element - ⭐
display: ruby-base
- ⭐
display: ruby-text
- ⭐
display: ruby-base-container
- ⭐
display: ruby-text-container
display-box
display: contents
- pretent the tag does not exist, only the inner text.
display: none
- as if the element does not exist.
Universal CSS Property Values
display: inherit
- take computed value from parent. [see CSS: Computed Style]
display: initial
- browser's initial value.
display: unset
-
same as
inherit
if the property inherits, else same asinitial
.
CSS: Media Query
CSS Layout
- Display Property
- Pure CSS Table
- CSS: 3-Column Side-Panels Layout
- CSS: Newspaper Multi-Column Layout
- CSS: Text Flow Around Image
- Hide Element (visibility)
CSS Layers
- Position Property
- Fix Element to Window
- Position: Relative
- Absolute Position
Text Over Image- z-index