How do I modify the display of block and inline elements?

Tutorial Categories:

Author: Deron Eriksson

Description: This is a CSS example that demonstrates how to modify the display of block and inline elements.

Tutorial created using: Windows XP

Page: < 1 2

(Continued from page 1)

Here is an HTMLW example page featuring this rule. In this example, we have two <p> elements and each contains a <span> element. The second span element gets assigned a display value of "block".

block-element-and-inline-element-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
span#displayBlock {
	display: block;
}
</style>
</head>
<body>
<p>Hello <span>There!</span></p>

<p>Goodbye <span id="displayBlock">There!</span></p>
</body>
</html>

The above code generates the following results. Notice that the "Hello There!" message appears on one line, since the first span is inline. Notice that the "Goodbye There!" message appears on two lines since the second span has a display value of block.

display of block-element-and-inline-element-test.html

A variety of other display values can also be set besides block and inline.

Page: < 1 2

AVAJAVA Web Tutorials

Total Categories: 24, Total Tutorials: 508

Cascading Style Sheets: 2 of 47 tutorials

block-element-and-inline-element-test.html