CSS Display Property

What is the CSS display property?

Note

• The display property in CSS is used to define the display behavior of an element on a web page.
• It determines how an element should be displayed within the document flow and how it interacts with other elements.

Here are some of the most common values for the display property ↗:

1. block: The element takes up the full width available, starting on a new line. Examples include <div>, <p>, and <h1>.

2. inline: The element takes up only as much width as it needs and does not start on a new line. Examples include <span>, <a>, and <strong>.

3. inline-block: Combines features of both block and inline. The element behaves like an inline element (doesn’t start on a new line) but allows setting width and height like a block-level element.

4. none: The element is not displayed at all. It is removed from the document flow, and no space is reserved for it. This is commonly used for hiding elements.

5. flex: This makes the element a flex container, allowing you to use flexbox to manage the layout of its children. It enables dynamic alignment and distribution of items within the container.

6. grid: This makes the element a grid container, enabling you to use CSS Grid Layout to create two-dimensional layouts with rows and columns.

7. inline-flex: Similar to flex, but the container behaves like an inline element (not breaking onto a new line).

8. inline-grid: Similar to grid, but the container behaves like an inline element.