CSS Display Property Example

CSS display property helps to define how any html element to be displayed on any web page; we can hide and show html element using CSS display property, depending on what value we set for display property, the web page look will change. display: value;

CSS Display Style

Here are the different values of css display.

div.ex1 {display: block;}
div.ex2 {display: inline;}
div.ex3 {display: inline-block;}
div.ex4 {display: none;}
CSS Display Examples

Here are some examples of how to apply css display property to any html element.

  • display block example
    display: block
    .ex1 {display: block;}
    
    <div class="ex1">display: block</div>
    
  • display none example, Display none is just opposite to display block, very similar to hide and show, when we don’t want to display any element on screen, we use display:none;
    display: none
    .ex1a {display: none;}
    <div class="ex1">display: block</div>
    
  • display inline example, displays any html element like span as an inline element, it will just look like a simple text line Hello friends, display: inline
    .ex2 {display: inline;}
    <span class="ex2">display: inline</span>
    
  • display inline-flexbox example, displays any html element as an inline-level flex container Hello friends,
    display: inline-flexbox
    .ex3 {display: inline-flexbox;}
    <div class="ex3">display: inline-flexbox</div>
    
  • display grid example

    Here you can see an example of how you can display div side by side using CSS.

    1
    2
    3
    4
    .ex4 {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
        grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
        background-color: #fff;
        color: #444;
    }
    .a {
        grid-column: col1-start / col3-start;
        grid-row: row1-start;
    }
    .b {
        grid-column: col3-start;
        grid-row: row1-start / row2-end;
    }
    .c {
        grid-column: col1-start;
        grid-row: row2-start;
    }
    .d {
        grid-column: col2-start;
        grid-row: row2-start;
    }
    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }
    
    
    <div class="ex4">
    	<div class="box a">1</div>
    	<div class="box b">2</div>
    	<div class="box c">3</div>
    	<div class="box d">4</div>
    </div>
    

Note, like other CSS display property, grid property will work on only html div element, but other display property like none, block etc can be applied on any html element.

CSS Style Examples