Tutorialspoint.dev

CSS | Display property

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.
There are mainly four types of display properties which are given below:

  • Block
  • Inline
  • Inline-Block
  • None

Block: This property is used as the default property of div. This property places the div one after another vertically. Height and width of the div can be changed using the block property if the width is not mentioned, then div under block property will take up the width of the container.

Example:

                        <!DOCTYPE html>
<html>
    <head>
        <title></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:



                        <!DOCTYPE html>
<html>
    <head>
        <title>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:

                        <!DOCTYPE html>
<html>
    <head>
        <title>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:

                        <!DOCTYPE html>
<html>
    <head>
        <title>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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter