How to Use the CSS Display Property

The dispay property is used to determine if and how an element appears.

The most common values for the display property are:

block
inline
none

Some common uses of the display property are:

To show and hide elements based on user interaction: a common example is a drop-down menu. This dynamic change of style is done with JavaScript.
To hide elements for certain media: for example, the images might be "turned off" by setting the display property to none in a style sheet for print.
Converting an inline element such as a link to a block element by setting its display property to block.

The following example shows how the display property can be used to turn links into block elements:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Link Buttons</title>
<style type="text/css">
a {
	display:block;
	padding: 6px 4px;
	margin: 4px;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
	border-top-width: 0px;
	border-left-width: 0px;
	background-color: #eaf1dd;
	color:#060;
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:1.5em;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<div>
	<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
	<a href="http://www.webucator.com">Webucator</a>
	<a href="http://www.google.com">Google</a>
</div>
</body>
</html>

This code renders the following:
display property demo