CSS Reference
display
Controls how an element participates in the layout. The single most important CSS property for structure.
Last updated: October 2026
Definition: The display property controls how an element is laid out — as a block, inline, flex container, grid container, or hidden. Every element has a default display value, and changing it changes the entire layout behavior.
🎬 Live Example
Five display values, side by side. Notice how each one affects flow, width, and spacing.
💡 Each display value changes the layout rules for the element and its children.
Basic Syntax
/* Block element — full width, new line */
p { display: block; }
/* Inline element — flows with text */
span { display: inline; }
/* Hybrid — inline flow + block properties */
.button { display: inline-block; }
/* Flex container — one-dimensional layout */
.container { display: flex; }
/* Grid container — two-dimensional layout */
.grid { display: grid; }
/* Hidden — removed from layout entirely */
.hidden { display: none; }🎯 Every display Value
| Value | Behavior | Default for |
|---|---|---|
block | Starts new line, full width | <div>, <p>, <h1>–<h6> |
inline | Flows with text, content width | <span>, <a>, <strong> |
inline-block | Inline flow, accepts box model | — |
flex | Flex container, 1D layout | — |
inline-flex | Inline-level flex container | — |
grid | Grid container, 2D layout | — |
inline-grid | Inline-level grid container | — |
none | Removed from layout | — |
contents | Element's box disappears, children remain | — |
table | Behaves like a table element | <table> |
block vs inline
| Feature | block | inline |
|---|---|---|
| Line break | Yes | No |
| Default width | 100% of parent | Content width |
| Accepts width/height | Yes | No |
| Vertical margins | Yes | No |
| Horizontal margins | Yes | Yes |
Making a Link a Block Button
Anchors default to inline. Add display to make them look like buttons.
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: #3b82f6;
color: white;
border-radius: 0.5rem;
text-decoration: none;
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}Flexbox and Grid Containers
/* Flex — one-dimensional */
.nav {
display: flex;
gap: 1.5rem;
align-items: center;
justify-content: space-between;
}
/* Grid — two-dimensional */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}Setting display: flex or display: grid on a parent makes it a flex or grid container. All direct children become flex or grid items.
display: none — Hiding Elements
.hidden {
display: none; /* Removed from layout entirely */
}
/* Responsive: hide on mobile, show on desktop */
.sidebar {
display: none;
}
@media (min-width: 1024px) {
.sidebar {
display: block;
}
}Warning: display: none also removes the element from screen readers. To hide visually but keep accessible, use a visually-hidden class that clips content with CSS instead.
display: contents — Invisible Wrapper
The element's box disappears, but its children remain in the layout.
.wrapper {
display: contents;
}
/* Before: children are wrapped in a div (flex items become children of wrapper)
After: children become direct flex items of the grandparent */Useful for semantic wrappers that you don't want to affect layout. Note that display: contents can break accessibility in some browsers, so use it carefully.
🎯 Common Responsive Pattern
/* Mobile-first: everything stacks */
.container {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Tablet: side-by-side */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
/* Desktop: 3-column grid */
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}Changing display at breakpoints is the standard way to build responsive layouts.
⚠️ Common Mistakes
- Trying to set width on an inline element. Inline elements ignore width and height. Use
inline-blockorblock. - Setting vertical margins on inline elements. Inline ignores vertical margin. Use inline-block or block.
- Using
display: noneto hide interactive elements. Removes them from accessibility tree. Use a visually-hidden class instead. - Forgetting
display: flexon the parent. Flex properties (justify-content,align-items) only work if the parent hasdisplay: flex. - Using flex when grid is better. Grid is for 2D layouts. Flex is for 1D. Choose the right tool.
- Not understanding that
displaychanges layout flow. Addingdisplay: blockto a span forces it onto a new line. - Using
display: contentson buttons. Breaks accessibility in some browsers. Test carefully.
♿ Accessibility Notes
display: noneremoves content from screen readers. For visual-only hiding, use a visually-hidden class withposition: absoluteandclip-path.- Don't change display on semantic elements. Making a
<table>into a block or a<button>into flex can affect how screen readers announce it. - Focusable elements must remain visible. Hiding a button with
display: noneremoves it from keyboard navigation. - Reading order should match visual order. Using flex-direction: row-reverse can create confusing keyboard navigation. Test with tab order.
- Test with keyboard navigation and a screen reader. The visual layout that looks right may not match the accessible structure.
❓ Frequently Asked Questions
What is the CSS display property?
The display property controls how an element participates in the layout. It determines whether the element is block, inline, flex, grid, or hidden. It is one of the most important CSS properties.
What is the difference between display block and inline?
Block elements start on a new line, take full width by default, and respect width/height/margin/padding on all sides. Inline elements flow with text, take only as much width as their content, and only respect horizontal margins/padding.
What is display inline-block?
inline-block is a hybrid. The element flows inline (like a word in text) but accepts width, height, margin, and padding on all sides (like a block). It is often used for buttons and inline cards.
What is the difference between display flex and grid?
Flex is one-dimensional — arrange items in a row OR a column. Grid is two-dimensional — arrange items in rows AND columns simultaneously. Use Flex for component layouts, Grid for page-level layouts.
What does display none do?
display: none removes the element from the layout entirely. It takes up no space, is invisible, and is not announced by screen readers. To hide visually but keep for screen readers, use a visually-hidden CSS class instead.