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.