The image below shows how HTML, CSS and the Browser works together. The HTML element 'span' is normally an 'inline' element but here it was given the display property of 'block' in CSS.

Because of this, the browser will display the elements as a 'block', which means that each of them take a line of their own. 'Block' elements can also have their width and height set.

This next one shows how the 'inline-block' display property works. It is similart to the 'block' property in a way that they still are contained inside a 'box' that you can set the height and width of.

However, you can observe that SPAN 4, SPAN 5 and SPAN 6 are sitting beside each other on the same line as long as the width permits. This is what makes it different from the 'block' property.

This last image shows the 'inline' property at work for SPAN 7, SPAN 8, and SPAN 9 elements as well as the images of Kobe Bryant below.

Notice how SPAN 7, 8, and 9 are sitting very close to each other and how they only occupy as much room as they need even though they have the same height and width with SPAN 4, 5, and 6.

This is because 'inline' elements only take up as much room as what the size of the text or image is. The height and width of 'inline' elements can't be set as well which makes our entry on CSS useless.