Inline Versus Block Elements


Examples of the differences and uses of the inline, block and inline block styles.

Block Example

This is a div. By default divs have a block style, which means by default there are breaks before and after the element.

Paragraphs also have a block style

This is a list of block elements in html:

Inline Example

This is a span. Spans have inline styling, which means their height is set by the line-height property, which is a text styling, and do not have a line feed before them
Here is a list of inline elements
When block elements, like divs, are styled with the inline-block property they can flow together on one line
Because this div has an inline-block style it does not have a line break before it

Inline-Block and Block Elements Have Different Properties

Inline elements have a line-height property but not a height property.
Block elements have a height property and a line-height property.
When only height is set text defaults to the top of a block element.
When only line-height is set text defaults to the middle of the block.
Both line-height and height are set on this block.

Inline-Block Example

The three elements below are divs set to display:inline-block. The first div has its height property set, the second has its line-height property set and the third element has both properties set. Inspect the third element. What do you see?

Inline block divs
flow together on one line.
This inline-block element has height and line-height set.