What does it mean to display inline vs inline blocks?

In CSS, the the three main display types are:

Inline

Block

Inline-Block

There are other display types such as:

Flex (Flexbox model)

Grid (Grid model)

These elements behave like a block-level element, and will lay-out content based on their own models.

Inline

Respects left & right margins and padding, but not top & bottom

Cannot have a width and height set

Allows other elements to sit to their left and right

Block

Respects all margin & padding in which has been defined, top & bottom included

Always stacks on top of each other

Acquires full-width of page if width not specifically defined

Try hovering on each element below for some interactivity 👀

As you see above, each element in their initial state of inline will sit side by side. When you hover on the first Inline element, it shows you what it would be like as a block level element - forcing the inline elements to a new line to respect the block properties. This is similar to the third Inline element; however, because it is last element in the group it will force its own line, leaving the first two elements to sit inline above it.

When hovering on the second inline element this shows you what it would be like if i had declared display:block, as block level elements always stack on top of each other.

Inline-Block

Allows other elements to sit to their left and right

Respects top & bottom margins and padding

Respects height and width

Inline-block will not force a new line and as you can see above, it allows you to create boxes which you may fill with content of any kind becuase it respects height, width, margin and padding.