What are the differences between inline vs inline-block?

Very frequently we use display:inline and display:inline-block when we write CSS. It is important to know about the differences between inline vs inline-block. We are very much familiar with display:inline and display:block but inline-block is the one that might not be very clear to all of us.

display:inline-block is the mixture of display:inline and display:block. That means in display:inline-block we get some behaviours of display:inline and some behaviours of display:block.

Following are some differences of display:inline and display:inline-block:

display:inline

• Cannot have a width and height set
• Respect left & right margins and paddings, but not top & bottom margins and paddings
• Allow other elements to sit to their left and right.

display:inline-block

• Allow other elements to sit to their left and right
• Respect top, right, bottom and left margins and paddings
• Respect height and width