CSS Display Property - inline, block, inline-block, none
CSS display property use for how to display list of item. Possible value is inline, block, inline-block and so on.
CSS display Property
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>