Loading...

CSS Display

display answers a quiet question: how does this box join the page? Some elements stack as full-width blocks; others sit inside a sentence; some can be hidden from layout entirely. This lesson maps the everyday values — and leaves deep inline-block practice for the next session.

A display toolkit

📊 Display at a glance

Value Everyday job
block Starts on its own line; often stretches to fill the row
inline Lives in the text line; width/height usually ignored
inline-block Sits in a line like text, but accepts width/height/padding like a box
none Removes the element from layout (space collapses)
flex / grid Powerful layout modes — later lessons, not this one

Default HTML already picks a display for many tags (div is block, span is inline, button is often inline-block-ish). CSS lets you override that when the flow needs a different job.

Block — own line, roomy box

Block boxes begin on a new line and typically take the available width. Headings, paragraphs, and divs behave this way by default.

Force block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — inside the sentence

Inline boxes sit in the text flow. They wrap with words. Setting width or height on a pure inline element usually does nothing useful — that is why people reach for block or inline-block.

Force inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — a short preview

inline-block keeps neighbors on one line when there is room, yet still respects width, height, and padding. You will practice it carefully in the next lesson; here, just recognize the hybrid.

Inline-block glance

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — leave the layout

display: none hides the element and collapses its space. Screen readers and layout both treat it as gone. Prefer a class toggle over scattering one-off rules.

Hide with none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden is a different story — the box can still reserve space. This lesson stays with display: none for true removal from layout. We will not dig into visibility here.

A calm display habit

Change display for flow reasons — not for button cosmetics (previous lesson) and not as a shortcut for every layout problem (flex/grid wait). Name intentional states with classes.

Show and hide classes

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Compare three modes

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

Try it yourself

  1. Force a span to display: block and give it width + padding.
  2. Force a short div (or heading) to display: inline and watch it sit in a sentence.
  3. Add a .chip with inline-block — notice width/padding work.
  4. Hide a panel with .is-hidden { display: none; } and toggle the class.
  5. Write one sentence: when would you pick block vs inline for a label?

Common mistakes

  • Expecting width / height to work on pure inline elements
  • Using display: none when you only wanted to mute visuals (and forgetting the space collapses)
  • Treating this lesson like button hover skins (that was Buttons)
  • Dumping Flexbox/Grid recipes here instead of learning the basic four values
  • Confusing “hidden from layout” with the deeper inline-block lesson next

Summary

  • display controls how a box joins page flow
  • block takes its own line; inline lives in text
  • inline-block is the hybrid — practiced next
  • none removes the element and its space from layout
  • Change display for flow jobs; leave fancy layouts for later lessons

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 35 of 35
Css Tutorial