CSS Display

CSS display is the most important property of CSS which is used to control the layout of the element. The default display value for most elements is block or inline. Eg: The <div> element is rendered as block, while the <span> element is displayed inline.

There are following CSS display values which are commonly used:

1. display: inline;

2. display: inline-block;

3. display: block;

4. display: run-in;

5. display: none;

Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element.

<!DOCTYPE html>
<html>
<head>
<title>Display Inline</title>
<style>
   p {
       display: inline; 
     }
</style>
</head>

<body>

<p>www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
<p>www.freetimelearning.xyz</p>
<p>www.freetimelearn.xyz</p>

</body>
</html>

Output :

www.freetimelearning.com

www.freetimelearn.com

www.freetimelearning.xyz

www.freetimelearn.xyz

Display Inline Block

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content.

	
<!DOCTYPE html>  
<html>  
<head>
<title>Display Inline Block</title>  
<style>  
   p {  
     display: inline-block;   
    }  
</style>  
</head>  

<body>  

<p>Hello Free Time Learning</p>  
<p>HTML Tutorial.</p>  
<p>HTML5 Tutorial.</p>  
<p>CSS Tutorial.</p>  
<p>CSS3 Tutorial.</p>  
<p>Javascript Tutorial.</p>  
<p>jQuery Tutorial.</p>  
<p>Bootstrap Tutorial.</p>  
<p>AngularJS Tutorial.</p>  

</body>  
</html>

Output :

Hello Free Time Learning

HTML Tutorial.

HTML5 Tutorial.

CSS Tutorial.

CSS3 Tutorial.

Javascript Tutorial.

jQuery Tutorial.

Bootstrap Tutorial.

AngularJS Tutorial.

Display Run-in

The display:run-in; element as either block or inline, depending on context

	
<!DOCTYPE html>  
<html>  
<head>
<title>Display  Run-In</title>  
<style>  
   p {  
      display:run-in;   
     }  
</style>  
</head>  

<body> 
 
<p>Hello Free Time Learning</p>  
<p>HTML Tutorial.</p>  
<p>HTML5 Tutorial.</p>  
<p>CSS Tutorial.</p>  
<p>CSS3 Tutorial.</p>  
<p>Javascript Tutorial.</p>  
<p>jQuery Tutorial.</p>  
<p>Bootstrap Tutorial.</p>  
<p>AngularJS Tutorial.</p>  

</body>  
</html>

Output :

Hello Free Time Learning

HTML Tutorial.

HTML5 Tutorial.

CSS Tutorial.

CSS3 Tutorial.

Javascript Tutorial.

jQuery Tutorial.

Bootstrap Tutorial.

AngularJS Tutorial.

Display None

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

	
<!DOCTYPE html>  
<html>  
<head> 
<title>Display None</title> 
<style>  
.hidden {  
    display: none;  
}  
</style>  
</head>  
<body>  
<h1>This is Sample heading.</h1> 
 
<div class="hidden">This is text is "Display None"</div>
 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>  
 
</body>  
</html>

Output :

This is Sample heading.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

CSS Tutorial