Block and Inline Directions

There are two directions on a website.

Block

Most elements in HTML default to block layout. This is when elements are stacked on top of each other like blocks.

.parent {
        display: block;
    }

Block 1

Block 2

Block 3

This is when items are in-a-line like a train. All text HTML elements are inline by default.

.parent {
        display: inline;
    }

Inline 1

Inline 2

Inline 3

There are times when you want a block element nested with inline elements, for this you will use inline-block.

.element {
        display: inline-block;
    }

display: inline; does not sit well with the rest of the inline text.

display:block; sits on top of the inline text.

display:inline-block; sits nicely with the inline text.