display

Description

Sets how an element is to be displayed in the browser.
Each element has a default type which you can change to have the element render differently in the browser. The most common display values are block, inline and none. Setting an element to display: none; causes the element to disapear from the page and other elements can then fill the vacated space. Block elements can be thought of as a box which by default takes up the whole horizontal line. Inline elements continue on from where they start without taking extra space, other elements can follow it without starting on the next line.

Table related display values:
table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption table-block

See also:
Visibility

Live Example

Play with the code in the textarea below.

<!doctype html>
<html>
<head>
<style type="text/css">
ul{
    border:solid 1px #000;
}

li{
    border:solid 1px #50A4AB;
    background:#CCC;
}
#inline li{
    display:inline;
}
#none li{
    display:none;
}    
#ib li{
    display:inline-block;
}
#block li{
    display:block;
}
#tablecell li{
    display:table-cell;
}
</style>
</head>
<body>

Values

inline block list-item run-in inline-block table inline-table none ...

Default value

Dependent on the element

Introduced in CSS version

Applies to elements

All

Inherited

Browser Support

Browsers	IE	Firefox	Safari	Opera	Chrome
Versions	full 8, part 5	1	1	7	0.2

Belongs to:

Positioning

See the full list CSS properties and browser support: CSS Properties

User login

Navigation