CSS Display Property Guide
Complete visual reference for all CSS display values.
Click any value to copy the CSS to your clipboard.
Basic Display Values
| Value | CSS | Description | |
|---|---|---|---|
block | display: block; | Takes full width, stacks vertically | |
inline | display: inline; | Flows with text, ignores width/height | |
inline-block | display: inline-block; | Inline but accepts width/height | |
none | display: none; | Removes element from layout entirely |
Basic Display Values - Visual Examples
display: block
Each block element takes full width and stacks vertically
display: inline
Inline elements flow with text, width/height are ignored
This is text with inline 1 and inline 2 elements that flow with the text.
display: inline-block
Inline-block flows inline but respects width/height
display: none
Element is completely removed from the layout
The middle element has display: none - notice there's no gap
Flex Display
| Value | CSS | Description | |
|---|---|---|---|
flex | display: flex; | Creates a flex container (block-level) | |
inline-flex | display: inline-flex; | Creates an inline flex container |
Flex Display - Visual Examples
display: flex
Creates a block-level flex container - children become flex items
The flex container takes full width (block-level)
display: inline-flex
Creates an inline-level flex container
The inline-flex container flows with surrounding text
Learn more: Complete Flexbox Cheatsheet | CSS Flexbox Generator
Grid Display
| Value | CSS | Description | |
|---|---|---|---|
grid | display: grid; | Creates a grid container (block-level) | |
inline-grid | display: inline-grid; | Creates an inline grid container |
Grid Display - Visual Examples
display: grid
Creates a block-level grid container for 2D layouts
Grid container with 3 columns
display: inline-grid
Creates an inline-level grid container
The inline-grid container flows with surrounding text
Learn more: Complete Grid Cheatsheet | CSS Grid Generator
Other Display Values
| Value | CSS | Description | |
|---|---|---|---|
contents | display: contents; | Children become direct children of parent | |
flow-root | display: flow-root; | Creates new block formatting context | |
table | display: table; | Behaves like <table> element | |
table-row | display: table-row; | Behaves like <tr> element | |
table-cell | display: table-cell; | Behaves like <td> element |
Other Display Values - Visual Examples
display: contents
The element's box disappears, children become direct children of parent
The wrapper with display: contents is invisible - its children (A, B) appear as siblings
display: flow-root
Creates a new block formatting context - useful for containing floats
Without flow-root (float escapes):
Container collapses
With flow-root (float contained):
Container contains float
display: table, table-row, table-cell
Create table layouts without using table elements
Block vs Inline vs Inline-Block Comparison
| Property | block | inline | inline-block |
|---|---|---|---|
| Takes full width | Yes | No | No |
| Starts on new line | Yes | No | No |
| Respects width/height | Yes | No | Yes |
| Respects top/bottom margin | Yes | No | Yes |
| Respects top/bottom padding | Yes | Visual only* | Yes |
| Can sit next to other elements | No | Yes | Yes |
* Inline elements can have padding, but it won't affect layout/push other elements away
Visual Comparison:
block elements:
inline elements:
Inline 1Inline 2Inline 3inline-block elements with width/height:
Common Patterns
Hiding Elements
display: noneRemoves from layout, not accessible to screen readers
visibility: hiddenHidden but still takes up space in layout
opacity: 0Invisible but clickable, takes space, can animate
Responsive Display
Change display at different breakpoints:
.element {
display: none;
}
@media (min-width: 768px) {
.element {
display: block;
}
}Centering with Flex
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid Layout
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}About the Display Property
The display property is one of the most important CSS properties for controlling layout. It determines how an element generates boxes and how it participates in the layout.
Modern layouts typically use display: flex for one-dimensional layouts (rows or columns) and display: grid for two-dimensional layouts (rows and columns simultaneously).
Understanding the difference between block, inline, and inline-block is fundamental to mastering CSS layout.
More CSS Guides & References
CSS Box Model Guide
Margin, border, padding, content
CSS Positioning Guide
static, relative, absolute, fixed
CSS Inheritance Guide
How properties cascade and inherit
CSS Cascade Layers
@layer for managing specificity
Container Queries Guide
Responsive components with @container
CSS Custom Properties
CSS variables and theming
View Transitions Guide
Smooth page transition animations
Anchor Positioning
Position elements relative to anchors
Parallax Scrolling
CSS-only parallax effects
CSS Performance Audit
Optimize CSS for speed
CSS Selectors Cheatsheet
All selectors with examples
CSS Units Cheatsheet
rem, em, vw, vh and more
CSS Functions Reference
calc(), clamp(), min(), max()
Media Queries Cheatsheet
Responsive breakpoints guide
Pseudo-Classes Cheatsheet
:hover, :focus, :nth-child, etc.
Pseudo-Elements Cheatsheet
::before, ::after, ::placeholder
Modern CSS Features
New CSS features for 2026
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes