CSS Property: display
[this page | pdf | back links]
The CSS (CSS1 and
some values that are new in CSS3) display
property indicates the type of box to be used for an element.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
block
|
Displayed as a block
element (like default <p> element)
|
|
flex
|
Displayed as a
block-level flex container
|
|
inline
|
(default value).
Displayed in-line (like default <span> element)
|
|
inline-block
|
Displayed as an in-line
block container (i.e. the inside is formatted like a block-level box but
element itself as an inline-level box)
|
|
inline-flex
|
Displayed as an
inline-level flex container
|
|
inline-table
|
Displayed as an
inline-level table
|
|
list-item
|
Displayed like a
default <li> element
|
|
none
|
Not displayed
|
|
run-in
|
Displayed as either
block or inline depending on context
|
|
table
|
Displayed like a
default <table> element
|
|
table-caption
|
Displayed like a
default <caption> element
|
|
table-cell
|
Displayed like a
default <td> element
|
|
table-column
|
Displayed like a
default <col> element
|
|
table-column-group
|
Displayed like a
default <colgroup> element
|
|
table-footer-group
|
Displayed like a
default <tfoot> element
|
|
table-header-group
|
Displayed like a
default <thead> element
|
|
table-row
|
Displayed like a
default <tr> element
|
|
table-row-group
|
Displayed like a
default <tbody> element
|
|
Default Value:
|
inline
|
|
JavaScript syntax:
|
e.g. object.style.display="none"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 200px;}
div.x1 {display: inline;}
</style>
</head>
<body>
1. Element with default property<br>
a<div>Text1</div>b<br><br>
2. Element set using in-file HTML style<br>
a<div class="x1">Text2</div>b<br><br>
3. Element set using JavaScript<br>
a<div id="x2">Text3</div>b
<script>
document.getElementById("x2").style.display = "inline";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyDisplay() {
var x = document.createElement("DIV"); x.style.display = "inline"; return (window.getComputedStyle(x, null).display == "inline");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties