CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Display inline, block, inline-block, none


CSS display property use for how to display list of item. Possible value is inine, block, inline-block and so on.

CSS display Property

Syntax Value Description
display inline
block
inline-block
none
value specify how to list display inine, block, inline-block and none of display.

CSS display:inline style

CSS display inline means elements displayed inline in current block of line.

Example-Code:

<head>
	<style type="text/css">
		li{
			display:inline;
		}
	</style>
</head>
<body>
	<p>This example is Inline elements</p>
	<ul>
		<li>Menu.1</li>  | 
		<li>Menu.2</li>  | 
		<li>Menu.3</li>  | 
		<li>Menu.4</li> 
	</ul>
</body>

Run it...   »

Example Result:

This example is inline elements

  • Menu.1
  •  | 
  • Menu.2
  •  | 
  • Menu.3
  •  | 
  • Menu.4

CSS display:block style

CSS display block means elements displayed as a block. Header and Paragraphs are always in block style.

Example-Code:

<head>
	<style type="text/css">
		li{
			display:block;
		}
	</style>
</head>
<body>
	<p>This example is First Block paragraph</p>
	<ul>
		<li>This is block Menu.1</li>
		<li>This is block Menu.2</li>
	</ul>
	<p>This example is Second Block paragraph</p>
	<ul>
		<li>This is block Menu.1</li>
		<li>This is block Menu.2</li>
	</ul>
</body>

Run it...   »

Example Result:

This example is First Block paragraph

  • This is block Menu.1
  • This is block Menu.2

This example is Second Block paragraph

  • This is block Menu.1
  • This is block Menu.2

CSS display:inline-block style

CSS display inline-block means elements is display as a inline but it's behaves is like block type.

Example-Code:

<head>
	<style type="text/css">
		li{
		  	display:inline-block;
		}
	</style>
</head>
<body>
	<p>This example is First Block paragraph</p>
	<ul>
		<li>This is block Menu.1</li>
		<li>This is block Menu.2</li>
	</ul>
	<p>This example is Second Block paragraph</p>
	<ul>
		<li>This is block Menu.1</li>
		<li>This is block Menu.2</li>
	</ul>
</body>

Run it...   »

Example Result:

This example is First Block paragraph

  • This is block Menu.1
  • This is block Menu.2

This example is Second Block paragraph

  • This is block Menu.1
  • This is block Menu.2

CSS display:none style

CSS display type none means element is not display, element is no longer display.

Example-Code:

<head>
	<style type="text/css">
		li{
			display:none;
		}
	</style>
</head>
<body>
	<p>This example is First Block paragraph</p>
	<ul>
		<li>This is block Menu.1</li>
		<li>This is block Menu.2</li>
	</ul>
	<p>This example is Second Block paragraph</p>
	<ul>
		<li>This is block Menu.1</li>
		<li>This is block Menu.2</li>
	</ul>
</body>

Run it...   »

Example Result:

This example is First Block paragraph

  • This is block Menu.1
  • This is block Menu.2

This example is Second Block paragraph

  • This is block Menu.1
  • This is block Menu.2