CSS Layout - The display Property

In CSS, the display property is a fundamental and powerful property that defines the layout behavior of an element. It specifies how an element should be rendered in the document flow, determining its box type and how it interacts with other elements. The display property can take various values, each influencing the layout in a different way.

Here are some common values for the display property:

Block-level Elements

block: This value makes the element generate a block-level box. Block-level elements typically start on a new line and take up the full width of their container. Examples include <div>, <p>, <h1> to <h6>, <form>, <header> ,<footer>, <section>.

Example

div {

display: block; } You can click on above box to edit the code and run again.

Output

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

Inline Elements

inline: This value makes the element generate an inline-level box. Inline elements do not start on a new line and only take up as much width as necessary. Examples include <span>, <a>, <strong>.

Example

span {
  display: inline;
}

Output

This is an inline <span> element inside a paragraph.

Inline-Block Element

inline-block: This value combines aspects of both inline and block. The element generates an inline-level box, but it can have block-level properties like width and height.

Example

img {
  display: inline-block;
}

You can click on above box to edit the code and run again.

Output

None Element

none: This value hides the element. The element and its content will be completely removed from the layout, and the space it would have occupied will collapse.

Example

#hiddenElement {
  display: none;
}

You can click on above box to edit the code and run again.

Output

Flex Property

flex: This value enables a flex container, turning its direct children into flex items. Flexbox is a powerful layout model for designing complex layouts with a dynamic and efficient way of distributing space.

Example

.flex-container {
  display: flex;
}

You can click on above box to edit the code and run again.

Output

Grid Property

grid: This value enables a grid container, turning its direct children into grid items. CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based layouts.

Example

.grid-container {
  display: grid;
}

You can click on above box to edit the code and run again.

Output

The 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
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex	Displays an element as an inline-level flex container
inline-grid	Displays an element as an inline-level grid container
inline-table	The element is displayed as an inline-level table
list-item	Let the element behave like a <li> element
run-in	Displays an element as either block or inline, depending on context
table	Let the element behave like a <table> element
table-caption	Let the element behave like a <caption> element
table-column-group	Let the element behave like a <colgroup> element
table-header-group	Let the element behave like a <thead> element
table-footer-group	Let the element behave like a <tfoot> element
table-cell	Let the element behave like a <td> element
table-column	Let the element behave like a <col> elem
table-row	Let the element behave like a <tr> element
none	The element is completely removed
initial	Sets this property to its default value
inherit	Inherits this property from its parent element
table-row-group	Let the element behave like a <tbody> element