CSS Display

The display property in CSS is one of the most fundamental and powerful properties used to control the layout of elements on a web page. It defines how an element is rendered visually, and it affects the layout, positioning, and interaction with other elements on the page.

Block:

Displays an element as a block-level element. A block element takes up the full width of its parent container and starts on a new line.

• Example elements: <div>, <h1< - <h6> , <p>, <section>, etc.

Inline:

Displays an element as an inline element. Inline elements do not start on a new line, and they take up only as much width as their content.

• Example elements: <span>, <a>, <strong>, <em>, etc.

Inline Block:

Combines features of both inline and block. Like inline, it allows elements to sit next to each other without starting on a new line, but like block, you can set the width, height, and margins/padding.

Flex:

The element behaves like a block element (takes up the full width available), but its children are laid out using Flexbox.

Inline-flex:

The element behaves like an inline element (doesn't force a line break and takes only the necessary space), while its children are laid out using Flexbox.

Grid:

The element behaves like a block element, taking up the full width available, while its child elements are laid out on a grid.

Inline-grid:

The element behaves like an inline element, taking up only the space necessary for its content (just like an inline element), while its children are laid out on a grid.