• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

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.

 

Summary
Review Date
Reviewed Item
CSS Element Visbility
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Element Visbility"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.