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 tonone
in a style sheet for print. - Converting an inline element such as a link to a block element by setting its
display
property toblock
.
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: