What is the difference between inline, inline-block, and block in CSS?

CSS

Block-level elements

• Take up the full width available by default
• Always start on a new line
• Respect width and height properties fully
• Examples: <div>, <p>, <h1> to <h6>, <section>
• Can contain other block and inline elements

Inline elements

• Take up only as much width as necessary
• Don't start on a new line
• Flow with the text content
• Width and height properties don't apply
• Margin and padding only work horizontally, not vertically
• Examples: <span>, <a>, <strong>, <em>

Inline-block elements

• A hybrid between block and inline
• Flow with text like inline elements
• Respect width and height properties like block elements
• Don't force new lines
• Respect vertical margins and padding
• Examples: <img>, or any element with display: inline-block

Examples

Copy
/* Block */
.block {
  display: block;
  width: 200px;
  height: 100px;
  margin: 10px;
}
/* Inline */
.inline {
  display: inline;
  width: 200px; /* Won't work */
  height: 100px; /* Won't work */
  margin: 10px; /* Only horizontal margins work */
}
/* Inline-block */
.inline-block {
  display: inline-block;
  width: 200px; /* Works */
  height: 100px; /* Works */
  margin: 10px; /* All margins work */
}