What the different between inline-block and block? And when should you used those values?

CodePudding user response：

This page illustrates the difference pretty well.

The functional difference is that:

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

You can think of the difference as that you want to use the behaviour of block elements inline, since normal inline elements don't allow such behaviours.

CodePudding user response：

The major difference is that inline-block does not add a line-break after the element, so the element can sit next to other elements in a line (as a inline elements)

So additionally inline-block allows to set both width and height on the element. Block element don't allow set width - it allocate all available width in line