CSS Display Property

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

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

CSS display:inline style

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS display property</title>
  <style type="text/css">
    li {
      display: inline;
    }
  </style>
</head>
<body>
  <p>This example set inline elements</p>
  <ul>
    <li>Menu.1</li>  | 
    <li>Menu.2</li>  | 
    <li>Menu.3</li>  | 
    <li>Menu.4</li> 
  </ul>
</body>
</html>

CSS display:block style

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS display property</title>
  <style type="text/css">
    li {
      display: block;
    }
  </style>
</head>
<body>
  <p>First block paragraph</p>
  <ul>
    <li>This is block Menu.1</li>
    <li>This is block Menu.2</li>
  </ul>
  <p>Another block paragraph</p>
  <ul>
    <li>This is block Menu.1</li>
    <li>This is block Menu.2</li>
  </ul>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
  <title>CSS display property</title>
  <style type="text/css">
    li {
      display:inline-block;
    }
  </style>
</head>
<body>
  <p>First block paragraph</p>
  <ul>
    <li>This is block menu.1</li>
    <li>This is block menu.2</li>
  </ul>
  <p>Another block paragraph</p>
  <ul>
    <li>This is block menu.1</li>
    <li>This is block menu.2</li>
  </ul>
</body>
</html>

CSS display:none style

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS display property</title>
  <style type="text/css">
    li {
      display:none;
    }
  </style>
</head>
<body>
  <p>First block paragraph</p>
  <ul>
    <li>This is block menu.1</li>
    <li>This is block menu.2</li>
  </ul>
  <p>Another block paragraph</p>
  <ul>
    <li>This is block menu.1</li>
    <li>This is block menu.2</li>
  </ul>
</body>
</html>

KANSIRIS

CSS Display Property - inline, block, inline-block, none