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.
