CSS Display Block Inline

Three of the display modes you will most commonly use with CSS are inline, block and inline-block. 

• display: inline will render an inline box, with no line breaks before or after.
• display: block generates a block box (with line breaks before and after)
• display: inline-block is a combination of the above. It renders a block box laid out inline.  

Here is an example of what the three look like.

HTML Example:

Inline list: 

First sentence
Second sentence
Third sentence


Block list: 

First sentence
Second sentence
Third sentence


Inline-block list:

First sentence
Second sentence
Third sentence
  

CSS Example:

#inline p { display: inline; }
#block p { display: block; }
#inline-block p {display: inline-block; }  

Result:

Inline list:

First sentence

Second sentence

Third sentence

Use display: inline or inline-block on an unnumbered list, place links inside LI tags and you can easily get a horizontal menu.