What is the difference between inline, inline-block, and block in 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

1/* Block */
2.block {
3  display: block;
4  width: 200px;
5  height: 100px;
6  margin: 10px;
7}
8
9/* Inline */
10.inline {
11  display: inline;
12  width: 200px; /* Won't work */
13  height: 100px; /* Won't work */
14  margin: 10px; /* Only horizontal margins work */
15}
16
17/* Inline-block */
18.inline-block {
19  display: inline-block;
20  width: 200px; /* Works */
21  height: 100px; /* Works */
22  margin: 10px; /* All margins work */
23}