Display in CSS controls how an element participates in layout. It decides whether an element behaves like a block, flows inline with text, becomes a flex container, becomes a grid container, disappears from layout, or uses another formatting model. If the box model explains what a box contains, the display property explains how that box behaves around other boxes.
Many CSS layout problems come from using the wrong display value. Width may not work on a normal inline element. Vertical padding may not affect surrounding text as expected. Flex properties do nothing unless the parent is a flex container. Grid properties do nothing unless the parent is a grid container. Understanding display prevents these mistakes.
Basic Display Syntax
The display property is written like any other CSS property. It accepts values such as block, inline, inline-block, none, flex, and grid.
.card {
display: block;
}
.nav {
display: flex;
}The card behaves as a block-level element. The navigation becomes a flex container, so its children can be arranged with flexbox.
display: block
A block element usually starts on a new line and takes up the available width by default. Common block elements include div, p, section, article, headings, and lists.
.section {
display: block;
width: 100%;
}Block elements are used for page structure and major content sections. Width, height, margin, padding, and border behave predictably on block boxes.
display: inline
Inline elements flow inside text. They do not start on a new line by default. Common inline elements include span, a, strong, and em.
.highlight {
display: inline;
background-color: yellow;
}Inline elements are useful when styling part of a line of text. Normal inline elements do not accept width and height in the same way block elements do. This is why setting width on a plain span may appear to do nothing.
display: inline-block
The value inline-block combines inline flow with block-like sizing. The element can sit inline with other content but still accept width, height, padding, margin, and border more predictably.
.tag {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
}Inline-block is useful for badges, tags, buttons, small labels, and navigation links. It gives more control than inline without forcing a full line break like block.
display: none
The value none removes an element from layout and visual rendering. The element still exists in the HTML, but it does not take space and is not displayed.
.mobile-only {
display: none;
}
@media (max-width: 700px) {
.mobile-only {
display: block;
}
}This pattern hides content by default and shows it on mobile. Use display: none carefully because hidden content is generally unavailable to users and assistive technologies while hidden.
display: flex
The value flex turns an element into a flex container. Its direct children become flex items. Flexbox is used for one-dimensional layout: rows or columns.
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}Flexbox is excellent for navigation bars, button groups, form rows, cards in a row, vertical stacks, centering, and distributing space. Flex properties affect direct children, not deeply nested descendants.
display: inline-flex
The value inline-flex creates a flex container that behaves like an inline-level box from the outside. This is useful for small components that should sit inline with text or other inline elements.
.icon-button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}The button can align an icon and text using flexbox while still behaving like an inline element around neighboring content.
display: grid
The value grid turns an element into a grid container. Its direct children become grid items. CSS Grid is used for two-dimensional layout: rows and columns together.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}Grid is strong for page layouts, card grids, galleries, dashboards, and complex alignment. Like flexbox, grid affects direct children of the grid container.
display: inline-grid
The value inline-grid creates a grid container that behaves like an inline-level box externally. It is less common than grid but useful for compact layout components.
.color-swatch {
display: inline-grid;
place-items: center;
width: 2rem;
height: 2rem;
}display: flow-root
The value flow-root creates a new block formatting context. It is useful for containing floats and preventing some margin-collapsing behavior.
.article-card {
display: flow-root;
}Before modern layout methods, clearfix hacks were commonly used to contain floats. display: flow-root provides a cleaner way to create a self-contained block formatting context.
display: contents
The value contents makes the element’s own box disappear while its children still participate in layout. It can be useful in special grid or flex situations, but it should be used carefully because it can affect accessibility and semantics in some browser and assistive technology combinations.
.wrapper {
display: contents;
}Do not use display: contents just to avoid writing better HTML or CSS. It is a specialized value and should be tested when accessibility matters.
Table Display Values
CSS can make elements behave like table parts using values such as table, table-row, and table-cell. These are less common now because flexbox and grid cover most layout needs.
.old-layout {
display: table;
}
.old-layout > div {
display: table-cell;
}Table display values can still appear in legacy layouts. For new layouts, flexbox and grid are usually clearer and more powerful.
Display Outer and Inner Behavior
Conceptually, display has outside and inside behavior. Outside behavior controls how the element participates in the parent layout. Inside behavior controls how its children are laid out. For example, inline-flex is inline on the outside and flex on the inside.
| Display Value | Outside Behavior | Inside Behavior |
|---|---|---|
| block | Block-level | Normal flow |
| inline | Inline-level | Inline flow |
| inline-block | Inline-level | Block-like box |
| flex | Block-level | Flex layout |
| inline-flex | Inline-level | Flex layout |
| grid | Block-level | Grid layout |
Display vs Visibility
display: none and visibility: hidden both hide elements visually, but they behave differently. Display none removes the element from layout. Visibility hidden hides the element but keeps its layout space.
.removed {
display: none;
}
.invisible {
visibility: hidden;
}Use display none when the element should not take space. Use visibility hidden when the space should remain reserved.
Display and Accessibility
Display choices can affect accessibility. Content hidden with display: none is generally removed from the accessibility tree while hidden. That is usually correct for closed menus or inactive panels, but wrong for text that should remain available to screen readers.
If content should be visually hidden but still available to assistive technology, use a dedicated visually-hidden utility instead of display none. The correct approach depends on whether the content is truly hidden or only visually hidden.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}Changing Display Responsively
The display property is often changed with media queries. A navigation menu may be displayed as a vertical block list on mobile and a horizontal flex row on desktop. A sidebar may appear below content on small screens and next to content on larger screens.
.nav-list {
display: block;
}
@media (min-width: 800px) {
.nav-list {
display: flex;
gap: 1rem;
}
}Responsive display changes should preserve content order and usability. Do not hide essential content on small screens just to simplify the layout.
Display and Formatting Contexts
Some display values create new formatting contexts. Flex, grid, flow-root, and table-related values can change how margins, floats, and child layout behave. This is why changing display can fix one layout issue but create another if the surrounding behavior is not understood.
When a display change has unexpected effects, inspect both the element and its direct children. The parent display value often controls how child width, height, gap, alignment, and order are interpreted.
Display and Replaced Elements
Some elements, such as images, videos, inputs, and iframes, are replaced elements. Their display behavior can feel different from normal text elements because the browser handles their internal content separately. Images are inline by default, which can create a small gap below them because they align with the text baseline.
img {
display: block;
max-width: 100%;
height: auto;
}Setting images to block is a common reset because it removes baseline spacing and makes responsive image layout easier. This small display change prevents many visual gaps in cards, galleries, and article images.
Display and Component Design
Choosing display is often the first step in component design. A button with an icon may use inline-flex. A card grid may use grid. A vertical menu may use flex with column direction. A badge may use inline-block. The display value should match the job of the component.
If a component feels hard to align, ask whether its display value matches the layout problem. Many alignment issues become simple after switching from block or inline to flex or grid.
Good display choices make the rest of the CSS smaller, clearer, and easier to debug across screen sizes.
Start with layout intent first.
Then choose display.
Common Display Mistakes
- Setting width and height on a normal inline element and expecting block behavior.
- Using flex properties on children when the parent is not display flex.
- Using grid properties without display grid.
- Using display none for content that should remain accessible.
- Expecting display contents to be harmless in every accessibility context.
- Using old table layouts when flexbox or grid would be clearer.
Display in CSS FAQ
What does display do in CSS?
The display property controls how an element behaves in layout and how its children are laid out.
What is the difference between block and inline?
Block elements start on a new line and fill available width. Inline elements flow inside text and do not start on a new line.
When should I use inline-block?
Use inline-block when an element should sit inline but still accept box sizing, padding, margin, width, and height more predictably.
Does display none remove the element?
It removes the element from visual layout, but the HTML still exists in the document source.
Continue learning CSS in order
Follow the topic sequence with the previous and next lesson.