Additional CSS Resources

CSS Block and Inline Elements: Part 1

February 18, 2010

In part one, I will explain how block and inline elements work

Block Level elements:

Most of the tags you will use in HTML (<p>, <div>, etc…) are rendered as block level elements. Blocks span the full width of space available, and skips a line on the top and bottom of the block.

For example (using the <p> tag):

This is a block level element

Notice how there is a break at the beginning and end of the block, and how it uses the full width available.

Inline Level Elements:

There are HTML tags that are rendered as inline elements (<b>, <i>, etc…). These elements do not break the flow and fits wherever it is placed.

For example (using the <b> tag), this is an inline level element. Notice how the element does not affect the flow of the text. It sits right with the text.

In part 2, I will show you how to manipulate elements using the CSS Display property.