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
/* 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.