CSS Block And Inline Elements

Thinking Inside The Box

Working with CSS, it helps if you think in boxes. Many CSS constructs use the block (also called a box) as a unit of construction. Div's are natural block elements.  Block level elements will span the full width of available space, block elements will break the flow of HTML and start a new line. If I insert a <div> element here on this line, the <div> will start a new line. The flow of the document will break, but it will continue after I close the <div> element. I'll show you. Here I start a <div>

and the <div> creates a box on a new line, breaking the document flow. When I close the <div> 

the document flow jumps outside the block or box and continues after, as though nothing happened.


Block Display Elements

Here is a list of block display elements:

<div>  general purpose box

<h1> .. <h6> headings

<p> paragraph

<ol> <ul> &tl;dl> Lists (ordered, unordered, definition)

<table> tables

<blockquote> quoted text

<pre> preformatted code

<form> form input box


Get Inline

Inline elements don't break the flow of the document, they fit and remain contained in the line, as their name suggests. Here's an example of an Inline Display Element. I can take the following text and highlight a section and change the font to italic. I can also change another section to bold and make the text maroon.

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

As you can see, it did not break the document flow or the natural flow of text.

Inline Display Elements

Here's a list of inline display elements:

<span> general purpose inline element

<a> anchor creates links or page targets

<strong> bold text

<em> italic text

<img /> image

<br> inline element forces a new line, but text continues on next line.

<input> form input field

<abbr> abbreviation

<acronym> acronym