Display property Inline, Inline-block and Block
- The height and width properties of this inline element cannot be set.
- Inline element do NOT start on a new line.
- It only takes up as much width as it needs.
- span, a, img and most of the fomatting tags have a default inline property.
- As inline-level containers, the height and width properties of this element can be set.
- That is the only difference between inline and inline-block property.
- Block element starts on a new line.
- It takes up the whole width available.
- div, h1, p, li, section have a default block property.
To put it in a simple way, these are element display properties. Inline is like to go to a park and share a bench with your friend or someone else and you can't change the size of the bench.
Inline-block is like you are going to a picnic with your friend and everyone's bringing their own blanket to sit on. You and your friends can sit together and you can choose how big of a place you would like to sit on.
Block is like you go to a concert and you buy the whole row of seats so no one else can sit next to you.
I would like to give my special thank to www.samanthaming.com which really helped me understand these three concepts.