display
Description
display defines the kind of display box an element generates.
| Item | Value |
|---|---|
| Initial value | inline |
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.display="inline" |
| Applies to | All elements. |
Syntax and Property Values
display: inline | /*from w ww . j a v a2s.co m*/
block |
list-item |
run-in |
inline-block |
table |
inline-table |
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-column-group |
table-column |
table-cell |
table-caption |
none |
inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| none | Not showing the element |
| box | displayed as a block-level flex container box |
| flex-box | displayed as a block-level flex container box |
| block | displayed as a block-level element like paragraphs |
| flex | displayed as a block-level flex container box |
| inline | Default value. displayed as an inline-level element like span |
| inline-block | placed as an inline element on the same line as adjacent content, but it behaves as a block element |
| inline-flex | displayed as an inline-level flex container box |
| inline-table | displayed as an inline-level table |
| list-item | displayed as a list-item |
| table | displayed as a table |
| table-caption | displayed as a table caption |
| table-cell | displayed as a table cell |
| table-column | displayed as a table column |
| table-column-group | displayed as a table column group like |
| table-footer-group | displayed as a table footer row group |
| table-header-group | displayed as a table header row group |
| table-row | displayed as a table row |
| table-row-group | displayed as a table row group |
| inherit | Inherit the display property from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
h1, h2, h3, h4, h5, h6 {<!-- w w w .j a v a 2s. c o m-->
display: inline;
margin: 0;
font-weight: normal;
}
</style>
</head>
<body>
<div>
<h1><h1></h1>
<span>span</span>
</div>
</body>
</html>
The code above generates the following result.
