CSS - Display and visible

CSS - Hidden and visible elements

To hide an element with CSS we will use the display property. On the other hand we will use the visibility property to show or hide the same element.

The logical question here is: What the difference is between them?

CSSp.hidden_p { 
  visibility:hidden;
}

visibility:hidden; hides the paragraph by keeping the space reserved to this element in the course of the document. All other elements will act as the element that exists even it is not visible.

CSSp.hidden_p { 
  display:none;
}

display:none;hides the paragraph and will NOT keep the space reserved to this element in the course of the document. All other elements will occupy the space reserved for this element and will act as if the element didn't exist in the first place..

Display elements in block or inline

There are elements in HTML that will be displayed with a line break by default. These kinds of elements are displayed in blocks.

• <h1>, <h2>, <h3>
• <div> <p>, <li>, etc

On the other hand there are elements that are displayed on the same line as other elements. We can say that this are displayed inline.

• <span>, <a>

Of course CSS allows us to change this default properties and we can assign a value of inline to a div and a value of block to a link tag.

CSSdiv { 
  display:inline; 
}

The above example will display all divs on one line. You would normally apply this to a class and apply that class to the div. For example, you can easily create a navigation bar using these concepts.

CSSdiv.nav_bar { 
  display:inline; 
}

Bellow you have an example of how to display links as a block. This will apply a new line at the end of the element.

CSSa {
  display:block;
}

You would normally apply this to a class and apply that class to the link tag. For example, you can easily create sidebar navigation using these concepts.

CSSa.sidebar_links {
  display:block;
}