CSS Display Property

The display property determines how an element participates in layout, including whether it creates its own line or shares a line.

display: block makes a block-level box that commonly spans the available inline size; inline lets content flow within a line; inline-block stays in a line but accepts width and height. display: none removes an element’s box from layout.

display: flex and display: grid establish different layout models for children. They get dedicated groups later. Display does not change the meaning of an underlying HTML element.

Observe how two blocks stack even though their text is short.

HTML

<div class="display-sample"><div class="tile">News</div><div class="tile">Events</div></div>

CSS

.display-sample .tile { display: block; background: #dbeafe; border: 1px solid #60a5fa; padding: 8px; margin: 4px 0; }

Rendered output

Observe: Each tile starts on a new line and occupies the available row.

Change the layout behavior without changing the HTML.

HTML

<div class="display-sample"><div class="tile">News</div><div class="tile">Events</div></div>

CSS

.display-sample .tile { display: inline-block; width: 105px; background: #dbeafe; border: 1px solid #60a5fa; padding: 8px; margin: 4px; text-align: center; }

Rendered output

Observe: The same tiles share a line when there is enough horizontal space.

Display affects box generation and layout, while the HTML tag still carries its semantics and default interactions.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• display:none removes an element from normal layout and the accessibility tree; do not use it when only visual transparency is intended.
• Changing display does not turn a div into a semantic button or link.

Set one tile to display:none and predict how the remaining tile moves. Compare with visibility:hidden.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Display controls the generated box and layout behavior; choose it with the intended interaction and semantics in mind.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.