CSS Display and Visibility

To change the way elements, appear, there are two types of CSS properties that you can use: display and visibility. 

CSS Display: The display property specifies if or how an element is displayed. All HTML tags are assigned a display property value of either inline or block.

A block element is an element that takes up the full width available and has a line break before and after it. Block elements display in the browser vertically.

An inline element is an element that only takes up as much width as necessary and does not force line breaks. Inline elements display in the browser horizontally.


Using CSS, you can change the inherent display property to:
• Force a block display, by using the declaration display: block.
• Force an inline display, by using the declaration display: inline.
• Force a list, by using the declaration display: list-item.
• Hide elements, by using the declaration display: none.

For example, by using display: block;


Example by using display: inline;


CSS Visibility: The visibility property specifies if an element should be visible or hidden. All HTML tags are assigned a visibility property value of either visible or hidden.

visible: This value makes the element display (this is the default setting).

 #body { visibilityvisible;}

hidden: This value makes the element disappear.

#footer {visibilityhidden;}

display: none; vs. visibility: hidden;

display: none; declaration, elements are removed from view and take up no space. When you use this declaration, it is as if the elements were never placed on the web page.

visibility: hidden; declaration, elements are merely hidden from view. They still occupy the same place that they originally would have taken up.

Leave a comment
No Cmomments yet