CSS Display

The CSS display property used to control the layout of the element. The CSS defines the default display value for all the elements.

Syntax:

display:value;

CSS display values:

display: inline;
display: inline-block;
display: block;
display: run-in;
display: none;

CSS display inline:

The inline element takes the required width only. It doesn’t force the line break so the flow of text doesn’t break in the inline example.

The inline elements are:

<span>
<a>
<em>
<b> etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello i2Tutorials</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

OUTPUT:

CSS Display

CSS display inline-block:

The CSS display inline-block element is very similar to the inline element but the difference is able to set the width and height.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
display: inline-block;  
} 
</style> 
</head> 
<body> 
<p>Hello i2Tutorials</p> 
<p>Java Tutorial.</p> 
<p>SQL Tutorial.</p> 
<p>HTML Tutorial.</p> 
<p>CSS Tutorial.</p> 
</body> 
</html>

OUTPUT:

CSS Display

CSS display block:

The CSS display block element takes as much horizontal space as they can. This means the block element takes the full available width. They make a line break before and after.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
display: block;  
} 
</style> 
</head> 
<body> 
<p>Welcome I2tutorials</p> 
<p>Java Tutorial.</p> 
<p>SQL Tutorial.</p> 
<p>HTML Tutorial.</p> 
<p>CSS Tutorial.</p> 
</body> 
</html>

OUTPUT:

CSS Display

CSS display run-in:

This property does not work in Mozilla Firefox. These elements do not produce a specific box.If the run-in box contains a bock box, it will be the same as the block.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
display: run-in;  
} 
</style> 
</head> 
<body> 
<p>Welcome I2tutorials</p> 
<p>Java Tutorial.</p> 
<p>SQL Tutorial.</p> 
<p>HTML Tutorial.</p> 
<p>CSS Tutorial.</p> 
</body> 
</html>

OUTPUT:

CSS Display

CSS display none:

The “none” value element totally removes the element from the page.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1.hidden { 
  display: none; 
} 
</style> 
</head> 
<body> 
<h1>This heading is visible.</h1> 
<h1 class="hidden">This is not visible.</h1> 
<p>The hidden heading does not contain any space.</p> 
</body> 
</html>

OUTPUT:

CSS Display