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

display: inline and display: inline-block both arrange elements in a line, but there are key differences:

• inline: the element behaves like a text character, does not set width and height, cannot set top and bottom margins, and vertical margins and padding do not affect the flow.
• inline-block: the element is placed in a line, but you can set width, height, vertical margins, and padding, like block elements.

Example:

span.inline {
  display: inline;
  width: 100px; /* will not work */
  height: 50px; /* will not work */
  background: lightblue;
}

span.inline-block {
  display: inline-block;
  width: 100px; /* will work */
  height: 50px; /* will work */
  background: lightgreen;
}

Thus, inline-block is convenient when you want the element to be in a line but also have sizes and margins.