What is the difference between display: inline and display: inline-block?

Question

What exactly is the difference between the inline and inline-block values of CSS display?

Answer 1

display: inline; is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:

    Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas.

The element has a display: inline; by default, because this tag is always used in a sentence. The

element has a display: block; by default, because it's neither a sentence nor in a sentence, it's a block of sentences.

An element with display: inline; cannot have a height or a width or a vertical margin. An element with display: block; can have a width, height and margin.
If you want to add a height to the element, you need to set this element to display: inline-block;. Now you can add a height to the element and every other block style (the block part of inline-block), but it is placed in a sentence (the inline part of inline-block).