DISPLAY9 min20 XP

Block vs Inline

Learn Block vs Inline with syntax-highlighted examples, live output, and Shiv AI.

Block vs Inline Elements

Every HTML element has a default display type — block or inline. Understanding this is fundamental to understanding why elements behave the way they do on screen and how layouts work.

Block Elements

Block elements always start on a new line and take full available width:

Example — Block Elements Stack Vertically

<!-- Each block element gets its own line -->
<div style="background:blue;color:white">I am a div</div>
<p style="background:green;color:white">I am a paragraph</p>
<div style="background:purple;color:white">Another div</div>

I am a div — takes FULL width

I am a paragraph — also full width

Another div — stacks below

Block elements: div p h1-h6 header section article ul li table form blockquote

Inline Elements

Inline elements flow within text — only as wide as their content:

Example — Inline Elements Flow in Text

<p>This has a 
  <span style="background:orange;color:black">span</span>,
  an <a href="#" style="color:cyan">link</a>,
  and a <strong style="color:red">bold word</strong> — all inline!
</p>

This has a span, an link, and a bold word — all inline!

Inline elements: span a strong em img code button label input select

display Property in CSS

Example — CSS display Changes Behavior

<!-- Make spans sit side by side with spacing -->
<style>
  .nav-link {
    display: inline-block;
    padding: 6px 14px;
    background: #333;
  }
</style>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>

Home About Contact

inline-block flows like inline but accepts width and height like block. Perfect for navigation links.

CSS display Values

display:blockForces any element to take full width and stack vertically

display:inlineMakes element flow within text. Cannot set width or height

display:inline-blockFlows inline but accepts width, height, padding. Best for nav items

display:noneHides element completely. Takes no space. Screen readers skip it

display:flexFlexbox layout. Aligns children in a row or column

Block Inside Inline is Wrong

Never put a block element inside an inline element. A div inside a span, or a p inside an a tag, violates the HTML spec and causes unpredictable rendering across different browsers.

img is Inline — Surprising!

The img tag is inline by default which is why images sit on the text baseline and have a small gap at the bottom. Add display:block to images in CSS to eliminate this gap.

Why Two Display Types?

The block vs inline distinction comes from typesetting. Block elements correspond to paragraphs that occupy their own space. Inline elements correspond to words within a paragraph that flow with surrounding text.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using only real-life analogies. No code at all.

Click the Explain tab to generate analogies automatically.

index.html

Live Preview

Start coding - Shiv AI monitors automatically

Which element is block-level by default?

Explanationdiv is block-level — starts on a new line and takes full width automatically. span, a, and strong are all inline elements that flow within text.

Build Challenge

Block vs Inline Demo

Show block and inline elements with visible CSS borders, and demonstrate inline-block for navigation.

Requirements (5 to pass)

div

span

display in style

inline-block

solution.html

Preview

Community Wall

Lesson 12

0/500

0/20 lines

Support CIWeb + Get +50 AI Messages

Just Rs.11 gives you 50 extra Shiv AI messages and keeps CIWeb free for everyone.