Inline vs Block vs Inline-Block

Answer

The display property controls how an element generates boxes and participates in layout. The three most common values are block, inline, and inline-block.

Visual Comparison

Comparison Table

Property	Block	Inline	Inline-Block
New line	✅ Yes	❌ No	❌ No
Width	Full container	Content only	Content/set
Height	Can set	Cannot set	Can set
Width/Height	Works	Ignored	Works
Vertical margin	Works	Ignored	Works
Horizontal margin	Works	Works	Works
Padding	Full	Horizontal only	Full

Block Elements

div {
	display: block;
	width: 80%; /* Works */
	height: 100px; /* Works */
	margin: 20px; /* All margins work */
	padding: 10px; /* All padding works */
}

Default block elements: <div>, <p>, <h1>-<h6>, <ul>, <li>, <header>, <section>, <article>

Inline Elements

span {
	display: inline;
	width: 200px; /* ❌ Ignored */
	height: 50px; /* ❌ Ignored */
	margin: 20px; /* Only left/right work */
	padding: 10px; /* Horizontal works, vertical doesn't push content */
}

Default inline elements: <span>, <a>, <strong>, <em>, <img>, <button>, <input>

Inline-Block Elements

.badge {
	display: inline-block;
	width: 100px; /* ✅ Works */
	height: 30px; /* ✅ Works */
	margin: 10px; /* ✅ All work */
	padding: 5px 10px; /* ✅ All work */
	vertical-align: middle; /* Can align vertically */
}

Practical Examples

<!-- Block: Navigation menu stacking -->
<nav>
	<a style="display: block">Home</a>
	<a style="display: block">About</a>
	<a style="display: block">Contact</a>
</nav>

<!-- Inline: Text with styled portions -->
<p>This is <span class="highlight">highlighted</span> text.</p>

<!-- Inline-block: Button-like elements in a row -->
<div>
	<button class="tag">JavaScript</button>
	<button class="tag">CSS</button>
	<button class="tag">HTML</button>
</div>

Common Pattern: Horizontal Navigation

/* Using inline-block */
.nav-item {
	display: inline-block;
	padding: 10px 20px;
	margin-right: 5px;
	background: #333;
	color: white;
}

/* Modern alternative: Flexbox */
.nav {
	display: flex;
	gap: 10px;
}

Whitespace Quirk with Inline-Block

<!-- Inline-block elements have whitespace between them -->
<button>One</button>
<button>Two</button>
<!-- Small gap appears between buttons -->

<!-- Solutions: -->
<!-- 1. Remove whitespace in HTML -->
<button>One</button><button>Two</button>

<!-- 2. Use flexbox instead (recommended) -->
<div style="display: flex; gap: 0;">
	<button>One</button>
	<button>Two</button>
</div>

display: none vs visibility: hidden

/* Removes from layout completely */
.hidden {
	display: none;
}

/* Hidden but takes space */
.invisible {
	visibility: hidden;
}

/* Hidden but accessible to screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

Key Points

• Block: Full width, new line, box model works fully
• Inline: Flow with text, width/height ignored
• Inline-block: Best of both - flow with content, box model works
• Modern layouts often use Flexbox or Grid instead
• Watch for whitespace gaps with inline-block