The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
Box 1
Box 2
Box 3
Hiding an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
Example
<html>
<head>
<style type="text/css">
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:
Example
<html>
<head>
<style type="text/css">
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
CSS Display - Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:
- <h1>
- <p>
- <div>
An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:
- <span>
- <a>
Changing How an Element is Displayed
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.
The following example displays list items as inline elements:
Example
<html>
<head>
<style type="text/css">
li{display:inline;}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="http://amaderitlearnhtml.blogspot.com/2012/01/html-tutorial.html" target="_blank">HTML</a></li>
<li><a href="your_link_here" target="_blank">CSS</a></li>
<li><a href="your_link_here" target="_blank">JavaScript</a></li>
<li><a href="your_link_here" target="_blank">XML</a></li>
</ul>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
Display this link list as a horizontal menu:
- HTML
- CSS
- JavaScript
- XML
The following example displays span elements as block elements:
Example
<html>
<head>
<style type="text/css">
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
Nirvana
Record: MTV Unplugged in New YorkYear: 1993Radiohead
Record: OK ComputerYear: 1997
Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.
More Examples
How to display an element as an inline element.
This example demonstrates how to display an element as an inline element.
This example demonstrates how to display an element as an inline element.
Example
<head>
<style type="text/css">
p {display:inline;}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
A display property with a value of "inline" results in
no distance between two elements.
How to display an element as a block element
This example demonstrates how to display an element as a block element.
This example demonstrates how to display an element as a block element.
Example
<head>
<style type="text/css">
span
{
display:block;
}
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
A display property with a value of "block" results ina line break between the two elements.
How to make a table element collapse
This example demonstrates how to make a table element collapse.
This example demonstrates how to make a table element collapse.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
tr.collapse {visibility:collapse;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="collapse">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> IE8 and earlier support visibility:collapse only if a !DOCTYPE is specified.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
| Peter | Griffin |
Note: IE8 and earlier support visibility:collapse only if a !DOCTYPE is specified.
