The Display Property

Every HTML element has a default display value that determines how it participates in page layout. The three most fundamental values:

.block-example   { display: block; }
.inline-example  { display: inline; }
.inline-block-ex { display: inline-block; }

• block — starts on a new line, takes up the full available width by default, and respects width/height/margin/padding on all sides. Examples: <div>, <p>, <h1>, <ul>.
• inline — flows within surrounding text like a word, doesn't start on a new line, and ignores width/height and vertical margin entirely. Examples: <span>, <a>, <strong>.
• inline-block — flows inline like text, but does respect width, height, and margin on all sides — a practical middle ground, often used for nav items or buttons that need explicit sizing while staying side-by-side.

.hidden       { display: none; }   /* removed entirely — no space reserved */
.flex-container { display: flex; } /* enables Flexbox layout for children */
.grid-container { display: grid; } /* enables Grid layout for children */

display: none removes an element from the page entirely, including its space — this differs from visibility: hidden, which hides the element visually but still reserves its layout space.

Understanding display is foundational: Flexbox and Grid (covered in the next two chapters) are simply more powerful display values that change how an element treats its children's layout, not just itself.