display — block, inline, none
Controls how an element fits in the page flow. block = full width. inline = only as wide as content. none = hidden.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
Every HTML element has a default display: div/p/h1 = block, span/a/strong = inline. display: block — element takes full width, starts on a new line. display: inline — element takes only its content width, stays in line. display: none — element is removed from the page entirely (no space). display: inline-block — best of both: stays in line BUT accepts width/height.
✏️ Try these changes
-
Change display: block to display: inline→ boxes shrink to content and stay in a row -
Change to display: none→ boxes disappear completely -
Change to display: inline-block→ boxes stay in a row but keep their padding/width -
Add width: 200px after display: block→ block elements respect width