Outer Display Values
| Value | Behaviour | Examples |
|---|---|---|
| block | Takes full width, stacks vertically, respects width/height/margin | div, p, h1–h6, section |
| inline | Flows with text, ignores width/height, vertical margins ignored | span, a, strong, em |
| inline-block | Flows with text but respects width/height/margin | Useful for buttons |
| none | Removes element from layout entirely | Toggling visibility |
Inner Display Values
/* Flexbox container */
display: flex; /* block-level flex container */
display: inline-flex; /* inline-level flex container */
/* Grid container */
display: grid; /* block-level grid container */
display: inline-grid; /* inline-level grid container */
/* Common patterns */
.nav { display: flex; align-items: center; gap: 16px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }display: none vs visibility: hidden
| Property | Visible? | Takes space? | Events? | Accessible? |
|---|---|---|---|---|
| display: none | No | No | No | Hidden from AT |
| visibility: hidden | No | Yes | No | Hidden from AT |
| opacity: 0 | No | Yes | Yes | Still accessible |
💡 Animating show/hide: You can't transition
display — use opacity + visibility together, or the newer @starting-style rule (Chrome 117+) to animate display changes.Table Display Values
display: table;
display: table-row;
display: table-cell; /* useful for equal-height columns */These are rarely needed now that flexbox and grid exist, but display: table-cell is still occasionally useful for vertical centering in email templates where flexbox support is limited.