Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Starts on new line.
Expands horizontally by default.
Respects width, height, vertical margins.
Flows within line box.
Width/height not applied.
Padding affects line height partially.
Flows inline but is sized like block.
Respects width, height, margins.
Great for badges & interactive controls.
Choosing the correct display context improves semantics, accessibility and responsive alignment.
Practical demonstration of block, inline, and inline-block elements
<div class="container">
<h1>Display Property Demo</h1>
<!-- Block Elements -->
<section class="section block-section">
<h2>Block Elements</h2>
<div class="box block">Block Element 1</div>
<div class="box block">Block Element 2</div>
<div class="box block">Block Element 3</div>
<p class="note">Each block element starts on a new line and takes full width</p>
</section>
<!-- Inline Elements -->
<section class="section inline-section">
<h2>Inline Elements</h2>
<p>
This is a paragraph with
<span class="box inline">Inline 1</span> and
<span class="box inline">Inline 2</span> and
<span class="box inline">Inline 3</span> elements
that flow within the text.
</p>
<p class="note">Inline elements flow within text without breaking lines</p>
</section>
<!-- Inline-Block Elements -->
<section class="section inline-block-section">
<h2>Inline-Block Elements</h2>
<span class="box inline-block">IB 1</span>
<span class="box inline-block">IB 2</span>
<span class="box inline-block">IB 3</span>
<span class="box inline-block">IB 4</span>
<p class="note">Inline-block flows inline but accepts width and height</p>
</section>
<!-- Mixed Example -->
<section class="section mixed-section">
<h2>Mixed Display</h2>
<div class="box block">Block Container</div>
<p>
Text with <span class="box inline">inline</span> and
<span class="box inline-block">inline-block</span> elements.
</p>
</section>
</div>Loading preview...
| Property | Block | Inline | Inline-Block |
|---|---|---|---|
| Starts new line | Yes | No | No |
| Width/Height apply | Yes | No | Yes |
| Vertical margins | Yes | No (collapses) | Yes |
| Participates in text flow | No | Yes | Yes |
| Good for containers | Sections | Text fragments | Small components |
| Examples | div, p, section | span, a, strong | button, input, img |
Block
block
<div>Section</div>Notes: Takes full line; supports width/height/margins.
Setting height on truly inline elements has no effect; use line-height or change display.
Inline-block elements render whitespace between them from HTML source. Remove whitespace or use flex.
Inline elements ignore vertical margins; block margins may collapse with parent.
Prefer semantic tags (header, nav, main, section, article, footer) for structure instead of generic divs.
Compare how block and inline elements behave side by side
Test how margins and height work with different display values
Change display properties to convert between block, inline, and inline-block
Each starts on its own new line.
Text Inline A Inline B continues without line breaks.
Width/height ignored; vertical margins ineffective.
Flows inline yet accepts width / height / margins.
Current display: block
Adjust width (ignored in pure inline), line-height, border and wrapping to see layout changes instantly.