CSS Display
Control how elements behave: block, inline, inline-block, none.
1Block vs Inline
Block elements take full width. Inline elements take only necessary width.
h1 { display: block; }
span { display: inline; }
div { display: none; /* Hidden completely */ }2Understand it in a real interface
The display property determines how an element participates in layout and how its children can be laid out. A grid or flex container changes its children’s layout relationship; it does not change the semantic meaning of the underlying HTML. Use markup that fits the content, then choose a layout model.
3Try it yourself
Put three articles in a container. Compare normal block layout, flex layout, and grid layout by changing only the container’s display rules. Keep the same HTML and note which additional declarations each model requires to produce the arrangement you want.
Finished reading?
Mark this topic as complete to track progress.