How do I modify the display of block and inline elements?
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 >

The display of block and inline elements can be modified using the CSSW 'display' property. A block element is an element such as <div>, <p>, or <h1> that is essentially a 'block' of content, set apart from other content. An inline element, on the other hand, is an element such as <span>, <strong>, or <a> that doesn't interrupt the flow of other content.

As an example, since they are blocked elements, two <p> elements next to each other would be displayed on separate lines from one another. On the other hand, two adjoining <a> elements would be displayed next to each other.


CSS gives us the power to modify the block and inline displays of elements. As an example, suppose that we'd like to modify a span element to display as a block element. To do this, I'll give a particular span element an id called "displayBlock". Following this, I'll set the display property of the CSS rule for the span element with id of "displayBlock" to be "block" rather than inline.

span#displayBlock {
	display: block;
}

(Continued on page 2)

Page:    1 2 >