In Css what is the difference between display:inline and display:inline-block?

Question

I am new to css. I wonder what is the differences between these two (display:inline vs display:inline-block). please provide any example.

Answer 1

Inline - Default value. Displays an element as an inline element (like <span>)
Inline Block - Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

Answer 2

Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with.

display: inline

display: inline

display: inline-block

display: inline-block

Comments

You said it will look like this, what is this here ?