Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | Display property

  • Last Updated : 09 Feb, 2021

The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page. 
Syntax: 
 

display: value;

Property values 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

ValueDescription
inlineIt is used to displays an element as an inline element.
blockIt is used to displays an element as a block element
contentsIt is used to disappear the container.
flexIt is used to display an element as a block-level flex container.
gridIt is used to display an element as a block-level grid container.
inline-blockIt is used to display an element as an inline-level block container.
inline-flexIt is used to display an element as an inline-level flex container.
inline-gridIt is used to display 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 <li> 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 <table> for all elements.
table-captionIt is used to set the behavior as <caption> for all elements.
table-column-groupIt is used to set the behavior as <column> for all elements.
table-header-groupIt is used to set the behavior as <header> for all elements.
table-footer-groupIt is used to set the behavior as <footer> for all elements.
table-row-groupIt is used to set the behavior as <row> for all elements.
table-cellIt is used to set the behavior as <td> for all elements.
table-columnIt is used to set the behavior as <col> for all elements.
table-rowIt is used to set the behavior as <tr> for all elements.
noneIt is used to remove the element.
initialIt is used to set the default value.
inheritIt is used to inherit the property from it’s parents’ elements.

Few important values are described below with the example.
Block: This property is used as the default property of div. This property places the div one after another vertically. The height and width of the div can be changed using the block property if the width is not mentioned, then the div under block property will take up the width of the container.
Example: 
 

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>CSS | Display property</title>
        <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">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>                   

Output: 
 



display block property

Inline: This property is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user. 
Example: 
 

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>CSS | Display property</title>
        <style>
            #main{
                height: 200px;
                width: 200px;
                background: teal;
                display: inline;
             
            }
            #main1{
                height: 200px;
                width: 200px;
                background: cyan;
                display: inline;
             
            }
            #main2{
                height: 200px;
                width: 200px;
                background: green;
                display: inline;
            }
            .gfg {
                margin-left:20px;
                font-size:42px;
                font-weight:bold;
                color:#009900;
            }
            .geeks {
                font-size:25px;
                margin-left:30px;
            }
            .main {
                margin:50px;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <div class = "geeks">display: inline; property</div>
        <div class = "main">
            <div id="main"> BLOCK 1 </div>
            <div id="main1"> BLOCK 2</div>
            <div id="main2">BLOCK 3 </div>
        </div>
    </body>
</html>                   

Output: 
 

display inline property

Inline-block: This features uses the both properties mentioned above, block and inline. So, this property aligns the div inline but the difference is it can edit the height and the width of block. Basically, this will align the div both in block and inline fashion.
Example: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>CSS | Display property</title>
        <style>
        #main{
                height: 100px;
                width: 200px;
                background: teal;
                display: inline-block;
             
            }
            #main1{
                height: 100px;
                width: 200px;
                background: cyan;
                display: inline-block;
             
            }
            #main2{
                height: 100px;
                width: 200px;
                background: green;
                display: inline-block;
            }
            .gfg {
                margin-left:200px;
                font-size:42px;
                font-weight:bold;
                color:#009900;
            }
            .geeks {
                font-size:25px;
                margin-left:210px;
            }
            .main {
                margin:50px;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <div class = "geeks">display: Inline-block; property</div>
        <div class = "main">
            <div id="main"> BLOCK 1 </div>
            <div id="main1"> BLOCK 2</div>
            <div id="main2">BLOCK 3 </div>
        </div>
    </body>
</html>                   

Output: 
 

display inline block

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: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>CSS | Display property</title>
        <style>
        #main{
                height: 100px;
                width: 200px;
                background: teal;
                display: block;
             
            }
            #main1{
                height: 100px;
                width: 200px;
                background: cyan;
                display: none;
             
            }
            #main2{
                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:20px;
            }
            .main {
                margin:50px;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <div class = "geeks">display: none; property</div>
        <div class = "main">
            <div id="main"> BLOCK 1 </div>
            <div id="main1"> BLOCK 2</div>
            <div id="main2">BLOCK 3 </div>
        </div>
    </body>
</html>                   

Output: 
 

display none property

Supported Browsers: The browsers supported by the Display property are listed below: 
 

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Firefox 3.0
  • Opera 7.0
  • Safari 3.1

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!