html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS display property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 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:

notepad
CSS direction    << Prev          Next >>   CSS empty-cells

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.