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.