Definition:
It means that when you apply this property to any HTML element, it controls how the element appears on the web page.
For example, if you use display: none;, then the element, its content, and even its space will completely disappear from the page.
This property controls the element and shows it on the page as a block, inline, or flex, based on your layout design.
You can set its value based on how you want your webpage to look.
Syntax:
selector {
display: value; /* block, inline, flex, none, etc. */
}Example:
<p style="display: block;">I am a block element (default behavior).</p>
<p style="display: none;">I am hidden completely using display: none.</p>Output:
First line output:
It will appear on the webpage as:
I am a block element (default behavior).
Because display: block; makes the element visible and behaves like a block, it takes up the full width.
Second line output:
This line doesn’t appear on the page at all.
Because display: none; completely hides the element — it’s like it doesn’t exist in the layout.
List of Parameters:
- Block: Takes up full width and starts on a new line. Examples: <div>, <p>. Covers full line unless width is set.
- Inline: Stays in line, doesn’t start a new line. Width/height cannot be set.
- Inline-block: Looks like inline but allows width and height.
- None: Hides the element completely; doesn’t take up space.
- Flex: Creates flexible layout; child elements in rows/columns; used for modern layouts.
- Grid: Helps build advanced layouts in rows and columns.
- Inline-flex: Like flex but stays inline with other elements.
- Inline-grid: Like grid but behaves inline.
- Table: Makes element behave like a table.
- Table-row: Acts like a table row.
- Table-cell: Acts like a table cell.
- Inherit: Takes display value from parent element.
- Initial: Resets to browser default style.
- Unset: Resets the property to default behavior.