CSS Element Visbility
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:
Visibilyt: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
h1.hidden{visibility:hidden;}
<html>
<head>
<style type=”text/ccs”>
h.hidden{visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
Display
none hides an element, and it will not take up any space.The element will be hidden, and the page will be and displayed as the element is not there:
Example
H1.hidden{display:none:}
<html>
<head>
<style type=text/ccs”>
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>
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>
An inline element only takes up 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 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
li{display:inline;}
<html>
<head>
<style type=text/ccs”>
l1 (display:inline;)
</style>
</head>
<body>
<p> Display this link list as a horizontal menu:</p>
<ul>
<li><a href=”/html/default.asp”targer=”_blank”HTML</a></li>
<li><a href=”/css/default.asp”targer=”_blank”CSS</a></li>
<li><a href=”/js/default.asp”targer=”_blank”JavaScript</a></li>
<li><a href=”/xml/default.asp”targer=”_blank”>XML</a></li>
<ul>
</body>
</html>
The following example displays span elements as block elements:
Example
Span{display:block;}
</html>
</head>
</style type=”text/css” >
Span
{
Display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>record:MTV Unplagged in New York</span>
<span>Year:1993</span>
<h2>Radiohead</h2>
<span>Record:OK Computer</span>
<span>Year:1997</span>
<body>
</html>
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.