CSS Display

The CSS display property controls the layout of an element and how it is rendered on the web page. It defines whether an element is a block, inline, flex container, grid container, or none, among other options.

Understanding the Display Property

The display property affects how an element is displayed and how it interacts with other elements. It is one of the fundamental properties for controlling layout in CSS.

Display Property Values

• block - The element generates a block box. It starts on a new line and takes up the full width available.
• inline - The element generates an inline box. It does not start on a new line and only takes up as much width as necessary.
• flex - The element behaves as a flex container, allowing for flexible box layouts.
• grid - The element behaves as a grid container, allowing for grid-based layouts.
• none - The element is not displayed at all (it does not take up any space).
• inline-block - The element is similar to inline, but it allows for setting width and height.
• list-item - The element behaves like a block-level list item, including a marker (such as a bullet).

Syntax

The syntax for the CSS display property is:

/* Display Property Syntax */
selector {
    display: ;
}

        

Examples

/* Block Display */
.block-example {
    display: block;
    width: 100%;
    background-color: #f4f4f4;
}

            

/* Inline Display */
.inline-example {
    display: inline;
    padding: 10px;
    background-color: #e0e0e0;
}

            

/* Flex Display */
.flex-container {
    display: flex;
    justify-content: space-between;
    background-color: #f9f9f9;
}

.flex-item {
    background-color: #4caf50;
    color: white;
    padding: 20px;
    margin: 5px;
}

            

/* Grid Display */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background-color: #f4f4f4;
}

.grid-item {
    background-color: #2196f3;
    color: white;
    padding: 20px;
}

            

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

            

/* Inline-Block Display */
.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: #ff5722;
    color: white;
    text-align: center;
    line-height: 150px;
}