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.