Inline Versus Block Elements


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

Block Example

This is a block. By default divs have a block style

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 example

Inline block divs
flow together on one line