CSS Display property

by jamna

HTML

<h1>These all spans are <span class="demon">demonstrating</span> the examples of different "Display:properies"</h1>
<span id="mySpaninline">I am an example of "Display:inline" property.</span> 
 <span id="mySpanblock"> I am an example of "Display:block" property.</span> 
 <span id="mySpaninline-block"> I am an example of "Display:inline-block" property.</span> 
 <span id="mySpan-listitem"> I am an example of "Display:list-item" property.</span>
 <span id="mySpan-none"> I am an example of "Display:none" property.</span>

CSS

.demon{background-color:red; line-height:1;
display:inline-block;}
span#mySpaninline
    {
    background-color:red;
    display:inline;
    }
span#mySpanblock
    {
    background-color:green;
    display:block;
    }
span#mySpaninline-block
    {
    background-color:yellow;
    display:inline-block;
    }
span#mySpan-listitem
    {
    background-color:blue;
    display:list-item;
    color:#ffffff;
    }

span#mySpan-none
    {
    background-color:blue;
     display:none;
    }