CSS — Lesson 8
Display Property
Controlling how elements are displayed and laid out.
Display Property
The display property determines how an element is rendered in the page layout.
Common Display Values
/* Block: full width, new line */
.block-element { display: block; }
/* Inline: flows with text */
.inline-element { display: inline; }
/* Inline-block: inline flow + respects width/height */
.inline-block-element { display: inline-block; }
/* None: removes from layout */
.hidden { display: none; }
Block vs Inline vs Inline-Block
| Property | block | inline | inline-block |
|---|---|---|---|
| Width/Height | Respects | Ignores | Respects |
| Margin/Padding | All sides | Horizontal only | All sides |
| New Line | Yes | No | No |
display: none vs visibility: hidden
.removed { display: none; } /* Removes from layout */
.invisible { visibility: hidden; } /* Hides but keeps space */
Tip: Use
inline-block when you need inline flow with width/height support. For modern layouts, prefer Flexbox or Grid.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →