CSS Display

The CSS display property is used to specify how an HTML element should be displayed on a web page. The display property controls the type of box model used for an element, as well as how the element is positioned and how it interacts with other elements on the page.

The display property accepts a wide variety of values, including:

1. none: The element is not displayed at all.
2. block: The element is displayed as a block-level element, taking up the entire width of its container and allowing for height and width adjustments.
3. inline: The element is displayed as an inline-level element, allowing for height and width adjustments, but not allowing for line breaks before or after the element.
4. inline-block: The element is displayed as an inline-level block container, allowing for height and width adjustments and allowing for line breaks before and after the element.
5. flex: The element is displayed as a flex container, allowing for flexible layout options using flexbox.
6. grid: The element is displayed as a grid container, allowing for grid-based layout options using CSS Grid.
7. table: The element is displayed as a table.
8. table-cell: The element is displayed as a table cell.

Here’s an example of using the display property to make an element display as a block-level element:

div {
   display: block;
}

<div>
  <p>In this example, the <code>display</code> property is set to <code>block</code>, which means that the <code>div</code> element will take up the entire width of its container and allow for height and width adjustments.</p>
  <p>By using the <code>display</code> property, you can control how HTML elements are displayed on your web page, allowing you to create a wide variety of layouts and designs.</p>
</div>