display

The display property applies to all HTML, elements and determines both the in-line and block level behaviour.

The possible values are.

PropertiesDescription
inlineSets the box type to inline
blockSets the box type to block
noneEliminates the element from the rendering process


(i) inline
Example
*{ display: inline }

Output
- All elements that belong to the <body> element are displayed inside the red box. The browser tries to render the entire <body> element on a single line.

snippet
<html>
<head>
<style>
*{display:inline}
</style>
</head>
<body>
<form>
<p>This is a paragraph text</p>
<span>This is a span text</span>
<i>This is a italic text</i> The below unordered list will not be visible in the browser.
<ul>
<li>Apple
<li>Orange
<li>Grapes
</ul>
</form>
</body>
</html>

(ii) block
Example
*{ display: block }

Output
- A block box is generated for each element.
- Each element starts in a new line-type box.

snippet
<html>
<head>
<style>
*{display:block}
</style>
</head>
<body>
<form>
<p>This is a paragraph text</p>
<span>This is a span text</span>
<i>This is a italic text</i> The below unordered list will not be visible in the browser.
<ul>
<li>Apple
<li>Orange
<li>Grapes
</ul>
</form>
</body>
</html>

(iii) none
Example
ol, table{ display: none }

Output
The none of the <ol> <table> elements are rendered.

snippet
<html>
<head>
<style>
*{display:none}
</style>
</head>
<body>
<form>
<p>This is a paragraph text</p>
<span>This is a span text</span>
<i>This is a italic text</i> The below unordered list will not be visible in the browser.
<ul>
<li>Apple
<li>Orange
<li>Grapes
</ul>
</form>
</body>
</html>
Related Tutorial
3. display