Display
📌 Covered in this chapter:
block · inline · inline-block · none · contents · flow-root · table · visibility · opacity · Debugging · Hidden vs Removed · Accessibility
Welcome to Chapter 19: Display — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Display Values Overview
| Value | Behavior |
|---|---|
block | Full width, new line (div, p) |
inline | Content width, same line (span, a) |
inline-block | Inline flow + width/height set cheyochu |
none | Element completely removed from layout |
flex / grid | Modern layout modes |
contents | Box disappear — children direct parent ki attach |
flow-root | BFC create — float containment |
2visibility vs display: none
CSS
.hidden-layout { display: none; } /* Removed from layout */
.invisible { visibility: hidden; } /* Space reserved, not visible */
.fade { opacity: 0; } /* Transparent but interactive unless pointer-events: none */Accessibility: Visually hidden but screen-reader accessible content ki .sr-only utility pattern use cheyandi — display:none screen readers kuda hide chestundi.
3Display Debugging
DevTools → Elements → Computed tab lo display value verify cheyandi. Unexpected layout issues often wrong display value valla vastayi.