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

Key Differences

Property	block	inline	inline-block
Line break	Takes up full line	Flows inline with text	Flows inline with text
Width / Height	✅ Works	❌ No effect	✅ Works
margin / padding	✅ All sides work	⚠️ Left/right only	✅ All sides work
Default width	Fills parent container	Determined by content	Determined by content

display: block

div, p, h1, section { display: block; } /* default */

• Takes up the full width of its parent (starts on a new line)
• Supports width, height, margin, and padding on all sides
• Common elements: <div>, <p>, <h1>–<h6>, <section>

display: inline

span, a, strong { display: inline; } /* default */

• Flows alongside adjacent elements on the same line
• width and height have no effect
• Vertical margin and padding don't affect line height
• Common elements: <span>, <a>, <strong>, <em>

display: inline-block

.badge {
  display: inline-block;
  width: 80px;
  height: 24px;
  padding: 4px 8px;
}

• Best of both worlds: flows inline but supports width/height
• Ideal for buttons, tags, icons, and other UI components