programplug Logo




CSS Display

The CSS Display property is one of the most important property in css which is used for controlling the layout of an element. It state that how the element is displayed.

VALUES DESCRIPTION
block It specify the block element to display.
inline It define an html element in same line to display.
run-in It specify the element that either it is block or inline element and it depend on the context.
none It specify to hide the Html element.
inherit It specify to inerit the property from its parent element.
intial make the property in default value.

1 CSS display block This property block the element and always start on a new line with taking full available width.
example-

<!DOCTYPE html>
   <html> 
    <head>  
    <style>  
p {  
display: block;   
}  
   </style>  
   </head>   
 <body>  
    <p>White </p> 
    <p>Green </p> 
    <p>Red </p>  
 </body>  
 </html>  

Output:
White

Green

Red

2 CSS inline to display It specify to display html element in the same line that take the required width only.
example-

 <!DOCTYPE html>
   <html> 
    <head>  
    <style>  
p {  
display: inline;   
}  
 </style>  
 </head>   
 <body>  
 <p>White </p> 
 <p>Green </p> 
 <p>Red </p>  
 </body>  
  </html>  

Output:

White Green Red

3 CSS To display run-in This property emphasis the element that either it is block or inline element, these element don't produce a soecific box by themsleves.
example-

  <!DOCTYPE html>
   <html> 
    <head>  
     <style>  
p {  
display:run-in;   
  }  
     </style>  
    </head>   
    <body>  
   <p>White </p> 
   <p>Green </p> 
   <p>Red </p>  
   </body>  
  </html>  


Output:
White

Green

Red

NOTE: This property did not work in Mozilla Firefox browser.

4 CSS to display none This property Hide the Html element and this property do not take any space.
example

    <!DOCTYPE html>
   <html> 
    <head>  
    <style>  
p
{
display:none;
}
    </style>  
    </head>   
    <body>  
   <p>White </p> 
   <p>Green </p> 
   <p>Red </p>  
    </body>  
  </html>  

Output:
{No display occur because of the none property}

5 CSS to display inline-block The CSS display inline-block used to dispaly the block element it is similar to the inline element but the difference is that we can set the width and height according to our manner.
Example

<!DOCTYPE html>
   <html> 
    <head>  
    <style>  
    p {  
    display: inline-block;   
    }  
    </style>  
   </head>   
   <body>  
   <p>White </p> 
   <p>Green </p> 
   <p>Red </p>  
   </body>  
  </html>  

Output:

White Green Red





Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy