Block and Inline Elements
HTML elements can be displayed either in block or inline style. The difference between these is one of the most basic things you need to know in order to use CSS effectively.
The 3 ways that HTML elements can be displayed
All HTML elements are naturally displayed in one of the following ways:
<p> tags and <div> tags are naturally displayed block-style.
(I say "naturally" because you can override the display style by setting the CSS display property e.g. display:inline;.)
A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.
Here I've started a paragraph and now I'm going to insert a <div>and then continue the text here...
See how the <div> jumped in and took over the full width of the space?
Common HTML elements that are naturally block-display include:
Inline-display elements don't break the flow. They just fit in with the flow of the document.
So here I've got a paragraph going on, and I'm going to add a <span> tag that has a yellow background and italic text. See how it just fits right in with the flow of the text?
More elements are naturally inline-style, including:
You change the display property of any elements
Although each HTML element has its natural display style, you can over-ride these in CSS.
This can be very useful when you want your page to look a particular way while using semantically-correct HTML.
Say you want to provide a list of items, but you don't want a big bulleted list. You just want to say that you're going to the store to buy:
- some fizzy drinks,
- a chainsaw,
- and some nylon stockings.
Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a <ul>.