CSS : block vs inline Elements

Since CSS does not live in an island no technology does.  It has to interact with it's neighbor HTML on a regular basis.  In the HTML world there's the block-level elements and then there's the inline-level elements.  Most developers could care less what the meanings of these words mean.  For the designers, it's okay they are just trying to make things look pretty cut them some slack :)

First let's look at block elements:

Block elements are needs to stand on it's own, meaning there's no elements at either sides.  They generate a break on the top of bottom of itself.

Here is an example:

The <h1> and <p> tags are block elements.  Even if you write the code <h1>This is H1<h1><p>This is a paragraph tag!</p> in one line next to each other without any breaks.  The resulting respresentation of those tags in the browser would look like this.