CSS Display and Visibility

When you want to change the way that an element would show and appear on a page, then you have to change the CSS Display and Visibility properties. These are some of the most important properties that you would have to learn when you are creating a page.

Display and Visibility

The display property refers to the actual way that an element would show up on a page. The visibility property is used for defining whether an element would even appear or be invisible within a page.

How to Hide an Element

There are two ways that element can be hidden. The first one is through changing the display setting. If you want an element not to appear on a page, what you can do is to set the display setting to none. The second method is to set the visibility settings to hidden. But though it might seem like the two properties can show the same result on the page, you should know that it will not have the same effects.

Effect of Hiding an Element

When you set the visibility setting to hidden, the element would not show up on a page. But it will still take up the space as if it is there. Here is the code that you would be using in order to set the visibility property of the element to the hidden.

h1.hidden {visibility:hidden;}

Effect of Setting the Display to None

If you want an element not to appear on a page then you can also use the display property. You can set this property to none. The difference in using the display property and setting it to none is that it will not take up any space. Here is the code that you can use if you want to set the visibility to none:

h1.hidden {display:none;}

Block and Inline Elements

A block element is a kind of element that uses up the full width that has been allotted. Another characteristic of a block element is that it has a break after and before it. Here are some examples of common block elements:

<h1>
<p>
<div>

 

Now the inline element will not take up the full width that is available. It would only use up as much space that is required. Here are some examples of inline elements:

<span>
<a>

You can change elements so that inline elements can be made to look like block elements. That feature is useful so that you can customize the appearance of the page and make sure that it would look different and unique. Here is an example of how you can make a block element look like a inline element:

li {display:inline;}

Keep in mind that when you change how an element will be displayed will not alter the kind of element that it actually is. Changing a block element to display as an inline element for example would only change the way that it looks like.

These are just some of the basic things that you should learn about the display and visibility in CSS.

Separator image .