box display types

display: ***;

Browser
Internet Explorer5.5 Firefox Opera

The display property changes the display type of an element.

h1 {
display: inline;
}

Property Value Explanation
display block the element is displayed as a block-level element
inline the element is displayed as an inline element
list-item the element is displayed as a list item
none the element is not displayed

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

h1, span {
background-color: #bde9ba;
}

.example1 { display: inline; }
.example2 { display: block; }
.example3 { display: list-item; margin-left: 1em; }
.example4 { display: none; }

div {
margin-bottom: 30px;
}

</style>

</head>
<body>

<div>
<h1 class="example1">The block-level element</h1> is displayed as an inline element.
</div>

<div>
The inline element is <span class="example2">displayed</span> as a block-level element.
</div>

<div>
<span class="example3">The inline element is </span><span class="example3">displayed as a list item.</span>
</div>

<div>
This text is displayed. <span class="example4">This text is not displayed.</span> This text is displayed.
</div>

</body>
</html>
Output

The block-level element

is displayed as an inline element.
The inline element is displayed as a block-level element.
The inline element is displayed as a list item.
This text is displayed. This text is not displayed. This text is displayed.