CSS Display Property tell the display type of an HTML Element and can change it.

Various Values of CSS Display property.

PropertyUse
InheritInherit property of parent.
InitialLoad its Default property.
InlineDisplay elements as inline level elements. For Exp <a>, <img>, <span>, <b>, <i>, <tt>, <etc>.
BlockDisplay elements as block level elements. For Exp div, p, h1, h2, h3, h4, h5, h6 etc.
NoneDo not display that element.
Inline-tableDisplay elements as inline level table.

Display Inline

Display inline is default display property of <a>, <img>, <span>, <b>, <i>, <tt>, <etc>. These Elements occupy space of content only and does not break line automaticly.

Properties of inline Elements elements

For Exp, see example below

Convert block elements to inline.

<html>
<head>
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
span,a{ background:blue;}
div,p{ background:yellow}
</style>
<head>
<body>
	<span>This is a span</span>             <!-- This is an inline element-->
	<a href="#">Link</a>                    <!-- This is an inline element-->
	<p>This is a paragraph</p>              <!-- This is an Block element--> 
	<div>This is a div</div>                <!-- This is an Block element--> 
</div>
</body>
</html>
						

Browser's view:

This is a span Link

This is a paragraph

This is a div

We can see the default display property of <span>, <a>, <p>, and <div> above.

Change Display block to inline

A static website

<html>
<head>
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
.list2 li{ display:inline}
</style>
<head>
<body>
	<ul class="list1">             <!--List with display block-->
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
	</ul>                          <!--List with display inline-->
	<ul class="list2">
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
	</ul>
	
	<p>Para 1</p>
	<p>Para 2</p>
	<p>Para 3</p>

	<p style="display:inline">Para 1</p>
	<p style="display:inline">Para 2</p>
	<p style="display:inline">Para 3</p>
</div>
</body>
</html>
						

Browser's view:

( List with display block )

  • List 1
  • List 2
  • List 3
  • List 4

( List with display inline )

  • List 1
  • List 2
  • List 3
  • List 4

( Default Paragraph )

Para 1

Para 2

Para 3

( Paragraph with display inline)

Para 1

Para 2

Para 3


Display Block

Display Block allow inline elements to behave to block Elements.

Properties of block elements

Convert inline elements to block.

<html>
<head>
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
span,a{ background:blue;}
div,p{ background:yellow}
</style>
<head>
<body>
	<a href="#">Link 1</a>             
	<a href="#">Link 2</a>                   
	<a href="#">Link 3</a>             
	<a href="#">Link 4</a>
	
	<a style="display:block" href="#">Link 5</a>             
	<a style="display:block" href="#">Link 6</a>                   
	<a style="display:block" href="#">Link 7</a>             
	<a style="display:block" href="#">Link 8</a>
</div>
</body>
</html>
						

Browser's view:

( Anchors with display inline )

Link 1 Link 2 Link 3 Link 4

( Anchors with display block )

Link 5 Link 6 Link 7 Link 8

Display NONE

Display none hide the space of the element. Thus it doesn't occupy any space.

Convert inline elements to block.

<html>
<head>
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
span,a{ background:blue;}
div,p{ background:yellow}
</style>
<head>
<body>
	<p>This paragraph in visible</p>
	<p style="display:none">This paragraph in hidden</p>

</body>
</html>
						

(Browser view)

This paragraph in visible

<!--This para is not visible as its display is none-->

Note: There is a difference between Display None and Visibility hidden. Visibility hidden only hide the content, but will occupy the space. Means the element will occupy space but will be invisible to the user. But in display none, element hides and doesn't occupy any space.