CSS Display and Visibility Properties

The display property specifies how an element should be displayed, while the visibility property determines whether an element is visible or hidden.

Hiding Elements - `display:none` vs `visibility:hidden`

You can hide an element by setting the display property to "none" or the visibility property to "hidden". However, these two methods have different effects.

visibility:hidden hides an element, but the hidden element still occupies the same space as before. This means the element is hidden but still affects the layout.

h1.hidden {visibility:hidden;}

display:none hides an element and the hidden element does not occupy any space. This means the element is not only hidden, but the space it occupied is removed from the page layout.

h1.hidden {display:none;}

CSS Display - Block and Inline Elements

Block elements take up the full width available and always start on a new line. Examples of block elements:

<h1>
<p>
<div>

Inline elements take up only as much width as necessary and do not start on a new line. Examples of inline elements:

<span>
<a>

How to Change the Display of an Element

You can change inline elements to block elements and vice versa to achieve a specific layout while still adhering to web standards.

The following example displays list items as inline elements:

li {display:inline;}

The following example displays span elements as block elements:

span {display:block;}

Note: Changing the display type of an element affects how it is displayed and what elements it can contain. For example, setting an inline element to display:block does not allow nested block elements inside it.

More Examples

Displaying Elements as Inline Elements

This example demonstrates how to display elements as inline elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
p {display:inline;}
</style>
</head>

<body>
<p>Result of display property set to "inline"</p>
<p>Two elements displayed on the same line.</p>
</body>
</html>

Displaying Elements as Block Elements

This example demonstrates how to display elements as block elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
span {
    display: block;
}
</style>
</head>
<body>

<span>Result of display property set to "block"</span> 
<span>Line break between these elements.</span>

</body>
</html>

Using the Collapse Property in a Table

This example demonstrates how to use the collapse property in a table.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
table, th, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <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 versions require a specified !DOCTYPE to support visibility:collapse.</p>

</body>
</html>

CSS Display and Visibility Properties