CSS Display Property

The CSS display property determines how an element is displayed on a webpage, defining its layout behavior and how it interacts with other elements.

It specifies the type of rendering box an element generates.
Controls whether an element is shown as a block, inline, flex, grid, etc.
Affects the layout structure and overall page flow.

HTML

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

Syntax:

display: value;

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.

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.

CSS

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

CSS

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

CSS

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

CSS

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

Output: Display none property on block 2

display none property

5. Using Display Flex and Display Grid

Flexbox and Grid are modern CSS layout systems used to create flexible and structured layouts.

Flexbox: Best for one-dimensional layouts (row or column).
Grid: Ideal for two-dimensional layouts (rows and columns).

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.

Understanding the Display Property

1. Using Display Block

2. Using Inline Display

3. Using Display Inline-block

4. Using Display None

5. Using Display Flex and Display Grid

Display Property Values

Explore