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
Share