What's the difference between display: inline; and display: inline-block;?


#1

Question

What’s the difference between display: inline; and display: inline-block;?

Answer

display: inline; elements:

  • allow display: inline; and display: inline-block; elements to sit to their left and right
  • do not respect top/bottom margin/padding declarations, and do not respect width and height declarations
  • only take up the width of the content

display: inline-block; elements:

  • allow display: inline; and display: inline-block; elements to sit to their left and right
  • respect top/bottom margin/padding declarations, and they respect height and width declarations
  • takes up all available horizontal space unless otherwise specified