CSS Display

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.

selector {
display: value;  /* block, inline, flex, none, etc. */

}

<p><style="display: block;">I am a block element (default behavior).</p>

<p><style="display: none;">I am hidden completely using display: none.</p>

List of Parameters 

Parameter — Description

• Block –It takes up the complete width and always starts on a new line.Examples: <div>, <p>.etc.It covers the full line unless you set a specific width.
• Inline – The element stays in line, doesn’t start a new line. You can't set width/height here.
• Inline-block – Looks like inline, but allows setting width and height.
• None – Hides the element completely. It won’t appear on the page, and won’t take up space.
• Flex – It creates a flexible layout.It places child elements in rows or columns, and is mostly used in modern web layouts to manage space easily.
• Grid – Helps you build advanced layouts in rows and columns. Another modern layout method.
• Inline-flex –It works just like flex, but stays in line with other elements beside it.That means you get a flex layout inside, but the element itself behaves like an inline one – sitting next to others without breaking the line.
• Inline-grid – Same as grid, but behaves inline.
• Table – Makes the element behave like a table (similar to the tag).
• Table-row – Acts like a table row.
• Table-cell – Acts like a table cell.
• Inherit – Takes the display value from its parent element.
• Initial –It resets the element’s display to the browser’s default style, like block or inline.
• Unset – Resets the display to either inherit or initial, whichever makes sense.