CSS Display Property (original) (raw)

Last Updated : 04 Jan, 2025

The CSS **display property specifies an element’s display behaviour (the type of rendering box). It defines how an element is rendered in the layout, determining its positioning and interaction within the document’s flow and structure.

**Syntax

display: value;

Try CSS Display Property

**Display Property Values

for all elements. for all elements.
Value Description
inline Used to display an element as an inline element.
block Used to display an element as a block element
contents Used to disappear the container.
flex Used to display an element as a block-level flex container.
grid Display an element as a block-level grid container.
inline-block Display an element as an inline-level block container.
inline-flex Display an element as an inline-level flex container.
inline-grid Display an element as an inline-level grid container.
inline-table It is used to display an inline-level table
list-item It is used to display all the elements in
  • element.
    		•
    run-in It is used to display an element inline or block level, depending on the context.
    table It is used to set the behavior as for all elements.
    table-caption It is used to set the behavior as
    for all elements.
    table-column-group Set the behavior as for all elements.
    table-header-group Set the behavior as
    for all elements.
    table-footer-group Set the behavior as
    for all elements.
    table-row-group It is used to set the behavior as for all elements.
    table-cell It is used to set the behavior as for all elements.
    table-column It is used to set the behavior as
    table-row To set the behavior as
    none Used to remove the element.
    initial Used to set the default value.
    inherit Used to inherit property from its parents’ elements.

    **Example : This example uses 3 divs to demonstrate the CSS display property.

    HTML `

    <style>
    #geeks1 {
        height: 100px;
        width: 200px;
        background: teal;
        display: block;
    }

    #geeks2 {
        height: 100px;
        width: 200px;
        background: cyan;
        display: block;
    }

    #geeks3 {
        height: 100px;
        width: 200px;
        background: green;
        display: block;
    }

    .gfg {
        margin-left: 20px;
        font-size: 42px;
        font-weight: bold;
        color: #009900;
    }

    .geeks {
        font-size: 25px;
        margin-left: 30px;
    }

    .main {
        margin: 50px;
        text-align: center;
    }
</style>
    GeeksforGeeks
    display: block; property
    Block 1
    Block 2
    Block 3

    `

    Understanding the Display Property

    The display property defines how an HTML element should be displayed. It controls the box type generated by an element, affecting its positioning and behavior within the document flow. Let’s dive into the key values:

    **1. Using Display Block

    This is the default property for <div> elements. It places them vertically, one after another. You can adjust the height and width of a block-level element.

    **Example: Use the given CSS in above example.

    #geeks1 {
    background: teal;
    display: block;
    }
    #geeks2 {
    background: cyan;
    display: block;
    }
    #geeks3 {
    background: green;
    display: block;
    }

    **Output:

    display block property

    **2. Using Inline Display

    Use this property to display an element inline. It doesn’t start a new line and respects the content flow.

    **Example: Use the given CSS in above example.

    #geeks1 {
    background: teal;
    display: inline;
    }
    #geeks2 {
    background: cyan;
    display: inline;
    }
    #geeks3 {
    background: green;
    display: inline;
    }

    **Output:

    display inline property example output

    **3. Using Display Inline-block

    Combining characteristics of both block and inline, this value allows elements to flow inline while still having block-level properties. It’s useful for creating responsive layouts.

    **Example: Use the given CSS in above example.

    #geeks1
    {
    background: teal;
    display: inline-block;
    }
    #geeks2 {
    background: cyan;
    display: inline-block;
    }
    #geeks3 {
    background: green;
    display: inline-block;
    }

    **Output:

    display inline block example output

    **4. Using Display None

    This property hides the div or the container which use this property. Using it on one of the div it will make working clear.

    **Example: Use the given CSS in above example.

    #geeks2 {
    background: cyan;
    display: none;
    }

    **Output: Display none property on **block 2

    display none property

    **5. Using Display Flex and Display Grid

    These values introduce powerful layout options. Flexbox (display: flex) enables flexible, one-dimensional layouts, while CSS Grid (display: grid) provides two-dimensional grid-based layouts.