3-css-display.md

What's the difference between inline vs inline-block vs block?

Display: Inline

Displays an element as an inline element. Any height and width properties will have no effect

Display: Inline Block

Displays an element as an inline-level block container. You CAN set height and width values.

Display: block

Displays an element as a block element. It starts on a new line and takes up the whole width.

Solution

inline

The element doesn’t start on a new line and only occupy just the width it requires. You can’t set the width or height.

inline-block

It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values.

block

It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values.