Display

Contact Us or call 1-877-932-8228
Display

Display

The display property is used to determine if and how an element appears. The most common values are shown below.

  • block
  • inline
  • none

The most common uses of display are:

  1. 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.
  2. To hide elements for certain media: for example, the images might be "turned off" by setting the display to none in a style sheet for print.
  3. 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:

Code Sample:

PositioningAndVisibility/Demos/LinkButtons.html
<!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>

Code Explanation

If we didn't set display to block, the page would look like this: Display Link Buttons Broken

But with display set to block, it looks like this: Display Link Buttons

Next