CSS display PropertyS2C Home « CSS display Property
Definition
The CSS display property allows us to specify the type of box generated by an element.
Applies To
All elements.
Property Values
block - A block box is generated for the element with line breaks before and after it.
inherit - The display properties are inherited from the parent element.
inline - An inline box(es) is(are) generated inside the element with no line breaks before or after it.
inline-block - A block box is generated inside the element with no line breaks before or after it.
list-item - A marker inline box is generated inside a block box.
none - No box is generated by the element and does not affect normal flow.
run-in - An inline or block box is generated, dependant upon the context.
inline-table, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group - The box generated behaves like the appropriate table element.
Default Value
Default value is set to inline.
Inheritance
The display property is NOT inherited from the parent element.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit, inline-table, run-in, table,
table-caption, table-cell, table-column, table-column-group,
table-row and table-row-group property values.
IE8 does with a valid !DOCTYPE.
IE9+ supports these property values.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS display property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS display Property</title>
<!-- Valid values for CSS display Property are:
block, inherit, inline, inline-block, list-item, none, run-in, inline-table,
table, table-caption, table-cell, table-column, table-column-group,
table-footer-group, table-header-group, table-row, table-row-group
-->
<style type="text/css">
.para1 {
display: inline;
}
.para2 {
display: block;
}
</style>
</head>
<body>
<h1>The CSS display Property</h1>
<h2>The display property using the inline value</h2>
<p class="para1"> Using the display property inline value.</p>
<p class="para1"> Using the display property inline value.</p>
<h2>The display property using the block value</h2>
<p class="para2"> Using the display property block value.</p>
<p class="para2"> Using the display property block value.</p>
</body>
</html>
How It Looks
The results of using the display property with the values above will look something like the following:
Homepage
Top