CSS Display Property

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

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 <li> 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 <table> for all elements.
table-caption	It is used to set the behavior as <caption> for all elements.
table-column-group	Set the behavior as <column> for all elements.
table-header-group	Set the behavior as <header> for all elements.
table-footer-group	Set the behavior as <footer> for all elements.
table-row-group	It is used to set the behavior as <row> for all elements.
table-cell	It is used to set the behavior as <td> for all elements.
table-column	It is used to set the behavior as <col> for all elements.
table-row	To set the behavior as <tr> for all elements.
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.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <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>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">display: block; property</div>
    <div class="main">
        <div id="geeks1">Block 1</div>
        <div id="geeks2">Block 2</div>
        <div id="geeks3">Block 3</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

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:

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.