What is the difference between display: block; and display: inline;?


#1

Question

What is the difference between display: block; and display: inline;?

Answer

Elements with display: block; will:

  • start on a new line
  • take up all available horizontal space - default width is the width of its container, not its content
  • not have any elements sitting to its left or right, by default
  • respect margin and padding on all sides
  • respect width and height when specified

Elements with display: inline; will:

  • not start on a new line
  • take up only as much horizontal space as necessary - the width of its content
  • will have other elements that are not set to display: block; sitting to its left and right
  • respect horizontal (left/right) margin and padding
  • not respect width and height