Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on
the element.
Also, with display: inline-block, the top and bottom margins/paddings
are respected, but with display: inline they are not.
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.
The following example shows the different behavior of display: inline,
display: inline-block and display: block:
