The real difference between CSS display property values

Few days ago I realized that I haven’t a clear idea about ‘display’ CSS property as I aspected (I’m talking about classic ‘block’, ‘inline’ and ‘inline-block’ values).
So I made some quick research and create a Pen to have a practical feedback, here is the result:

Set up a natural ‘inline’ element

Firstly I create a text with inside a <span> element simply highlighted with a green background and a white text.
As you can see the element has by default display property set to “inline”.

Adding some layout properties

In the second box I added to the element some properties that involved the layout appearence: width, height, margin and padding.
The element is always inline so you can notice the first fact:

Inline elements accept padding and horizontal margin but ignore width, height and vertical margin.

The hybrid ‘inline-block’

In the third box I set the display property of the <span> to ‘inline-block’ discovering a new behavior:

Inline-block elements accept all the mentioned properties (included width, height and vertical margin) but stay aligned to the text.

Finally make a ‘block’

In the last box the element has ‘display: block’ and this change disclose the last difference:

Block elements are followed by a line break that put following contents on a new line.

A last note: if I did not specify the width property the block would be enlarged to full-width.