CSS display property

The display property in CSS controls how an element is displayed on the page. It determines whether an element will be a block, inline element, or an element with another display type.

Main Values for the Display Property

Value	Description	Example
`block`	Element takes up the full available width, starting from a new line. Usually used for containers, headings, paragraphs, etc.	`<div>`, `<p>`, `<h1>`
`inline`	Element takes up only the necessary width and does not cause a line break.	`<span>`, `<a>`, `<strong>`
`inline-block`	Element behaves like an inline element but allows setting dimensions (width and height).	`<img>`, `<button>`
`none`	Element is not displayed and takes up no space in the document. All its properties, including dimensions and positioning, are ignored.	`<div style="display: none;">`
`flex`	Element becomes a flex container, inside which its child elements become flex items (allows creating flexible layouts).	`<div style="display: flex;">`
`grid`	Element becomes a grid container, and its child elements become cells of this grid.	`<div style="display: grid;">`
`table`	Element behaves like a table, similar to the `<table>` element.	`<div style="display: table;">`
`list-item`	Element behaves like a list item, similar to `<li>`.	`<div style="display: list-item;">`
`run-in`	This mode is rarely used. Element first behaves as a block, and then, if possible, it becomes inline.	`<div style="display: run-in;">`
`inherit`	The `display` value is inherited from the parent element.	`<div style="display: inherit;">`
`unset`	If the `display` property is set on an element, it is reset, and the element returns to its initial value.	`<div style="display: unset;">`

When to Use Each Value

block — use for elements that should take up the full width of the parent container, for example, for containers and sections.
inline — use for elements that should be placed in line with other elements, for example, for links or text.
inline-block — useful for creating elements that should be placed in line but have the ability to set dimensions.
none — use to hide elements when you need to completely remove them from the document flow.
flex — use to create flexible, responsive layouts where child elements can change their size depending on available space.
grid — use to create two-dimensional layouts with precise positioning of elements in a grid.
table — use to create tables where elements should behave like table rows and cells.
list-item — use for elements that should behave like list items, for example, <ul> and <ol>.
run-in — rarely used, but useful for creating elements that first behave as block elements and then become inline.

Usage Example

css

/* Flex container */
.container {
  display: flex;
  justify-content: space-between;
}

/* Grid element */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Hiding element */
.hidden {
  display: none;
}

display: none Usage Features:

When using display: none, the element is not only hidden but also takes up no space in the document flow. If you need to hide an element but keep its space, use visibility: hidden.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

CSS display property

#Main Values for the Display Property

#When to Use Each Value

#Usage Example

Short Answer

Main Values for the Display Property

When to Use Each Value

Usage Example