CSS Display Property

The display property in CSS is used to control how an HTML element is displayed on a webpage. It defines whether an element should be displayed as a block or inline element, or if it should be hidden or shown only under certain conditions.

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

block: 

This value specifies that the element should be displayed as a block-level element. It takes up the full width of its container and is displayed on a new line, with a line break before and after it.

div {
 display: block;
}

inline: 

This value specifies that the element should be displayed as an inline-level element. It does not take up the full width of its container and does not start on a new line.

span {
 display: inline;
}

inline-block: 

This value specifies that the element should be displayed as an inline-level block container. It takes up the full width of its container, but does not start on a new line.

button {
 display: inline-block;
}

none: 

This value specifies that the element should not be displayed on the page. It is effectively hidden from view.

.hidden {
 display: none;
}

flex: 

This value specifies that the element should be displayed as a flex container. It is used for flexible layouts and allows you to easily adjust the layout of child elements.

.container {
 display: flex;
}

grid: 

This value specifies that the element should be displayed as a grid container. It is used for grid-based layouts and allows you to define rows and columns for child elements.

.container {
 display: grid;
}

These are just a few examples of the display property and its values. By using the display property, you can control the layout and visibility of HTML elements on your webpage, and create complex, flexible layouts that adjust to different screen sizes and devices.