CSS Display

The display property is the most important CSS property for controlling layout.

CSS Display

The display property is used to specify how an element is shown on a web page.

Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML elements.

Block-level Elements

A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Example of block level elements

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Display property values

The display property has many values.

Value	Description
inline	Displays an element as an inline element
block	Displays an element as a block element
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
inline-flex	Displays an element as an inline-level flex container
inline-grid	Displays an element as an inline-level grid container
none	The element is completely removed.
initial	sets this property to its default value
inherit	inherits this property from its parent element

Here are the key points

1. Core Display Values

• block: The element is displayed as a block-level element, taking up the full width available and starting on a new line.
• inline: The element does not start on a new line and only takes up as much width as necessary.
• inline-block: similar to inline, but the element behaves like a block element, allowing for setting width and height.
• none The element is completely removed from the document layout.

2. Layout Models

• flex: Makes the element a flex container, enabling the use of the flexilble box layout model for aligning and distributing space among child elements.
• grid: Turns the element into a grid container, which allows for the creation of complex two-dimensional grid-based layouts. It divides the space into rows and columns
• inline-flex: Behaves like inline, but the element itself acts as a flex container.
• inlne-grid: Behaves like inline, but the element itself acts as a grid container.