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.

This is H1

This is a paragraph tag!



As you can see even without any line break tag <br/> the elements puts at tag all by itself.

The inline-level elements:

The inline-level elements are the nice kid that shares toys with his friends, while his CEO friend the block elements tries to dominate everything.  If you have to think of it that way you can!  The inline-element works within the context/text etc. and does not generate a line break.

For example if we put a <strong> in the middle of the paragraph tag text it won't generate a line break. with something like this <p>This is a <strong>paragraph</strong> tag!</p>


This is a paragraph tag!


As you can see the <strong> tag in the middle of the sentence did not break up the text into a new line.