CSS Display Property

Last Updated : 9 Mar, 2026

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 

<html>
<head>


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


head>
<body>
    <div class="gfg">GeeksforGeeksdiv>
    <div class="geeks">display: block; propertydiv>
    <div class="main">
        <div id="geeks1">Block 1div>
        <div id="geeks2">Block 2div>
        <div id="geeks3">Block 3div>
    div>
body>
html>

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 

 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: 

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.

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

ValueDescription
inlineUsed to display an element as an inline element.
blockUsed to display an element as a block element
contentsUsed to disappear the container.
flexUsed to display an element as a block-level flex container.
gridDisplay an element as a block-level grid container.
inline-blockDisplay an element as an inline-level block container.
inline-flexDisplay an element as an inline-level flex container.
inline-gridDisplay an element as an inline-level grid container.
inline-tableIt is used to display an inline-level table
list-itemIt is used to display all the elements in
  • element.
    • run-inIt is used to display an element inline or block level, depending on the context.
    tableIt is used to set the behavior as for all elements.for all elements. for all elements.
    table-captionIt is used to set the behavior as
    for all elements.
    table-column-groupSet the behavior as for all elements.
    table-header-groupSet the behavior as
    for all elements.
    table-footer-groupSet the behavior as
    for all elements.
    table-row-groupIt is used to set the behavior as for all elements.
    table-cellIt is used to set the behavior as for all elements.
    table-columnIt is used to set the behavior as
    table-rowTo set the behavior as
    noneUsed to remove the element.
    initialUsed to set the default value.
    inheritUsed to inherit property from its parents' elements.
    Comment

    Explore