CSS Display: Understanding Different Display Values

Introduction

The display property in CSS is used to control the layout and visibility of elements on a web page. By adjusting the display value, you can change how elements are rendered and interact with other elements. This guide will explore various display values, including block, inline, inline-block, flex, grid, and none, with practical examples.

Block Display

Elements with display: block take up the full width available and start on a new line. They stack vertically:


/* Block display */
.display-block {
    display: block;
}

Example:

Block Display

This element is a block-level element. It takes up the full width available and starts on a new line.

Inline Display

Elements with display: inline only take up as much width as necessary and do not start on a new line. They flow inline with other elements:


/* Inline display */
.display-inline {
    display: inline;
}

Example:

Inline Display

This element is an inline element. It only takes up as much width as needed and does not start on a new line.

Inline-Block Display

Elements with display: inline-block combine characteristics of block and inline elements. They flow inline but respect width and height:


/* Inline-block display */
.display-inline-block {
    display: inline-block;
}

Example:

Inline-Block Display

This element is an inline-block element. It flows inline but can have its own width and height.

Flex Display

Elements with display: flex enable the use of the Flexbox layout model, allowing for flexible layouts with dynamic resizing and alignment:


/* Flex display */
.display-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

Example:

Flex Display

This element is a flex container. Its child elements are aligned and centered using Flexbox properties.

Grid Display

Elements with display: grid enable the use of the CSS Grid layout model, allowing for complex grid-based layouts with rows and columns:


/* Grid display */
.display-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

Example:

Grid Item 1

Grid Item 2

None Display

Elements with display: none are completely removed from the document flow and are not visible:


/* None display */
.display-none {
    display: none;
}

Example:

None Display

This element is hidden and does not take up any space in the layout.

Conclusion

The display property is essential for controlling how elements are rendered on a web page. By using values such as block, inline, inline-block, flex, grid, and none, you can create various layout and visibility effects. Experiment with these display values to see how they can enhance your web design and layout. Happy styling!

RankersPlus