Today we're going to talk about the display and visibility properties of CSS. This is the second advanced tutorial and is intended for those of us that already understand the Basics of CSS.

Visibility

The Visibility of an element can be adjusted by using this visibility property. Let us say that we want to make a certain element invisible on a web page or that we want a certain to definitely be visible, we would use this visibility property.

Values

We can have three possible values for this visibility property.

  1. hidden - hides the element (these elements still take up space)
  2. visible - makes the element visible (default)
  3. collapse - this removes a table row or table column without affecting the table layout. If this is used on non-table elements they will render as "hidden".

Note: no version of IE 8 or less supports the collapse value for this property. Consider the following code:

.hidden {visibility:hidden;}

This class would make the element "hidden" but the space for it would still exist, but it would show nothing. This might be a little confusing at first, however, it is very easy! This is some visible text that we can see. This is some invisible text that we cannot see but still takes up space inside of the element. This is more text that we will write for the sake of this example. The more and more we write we see that there is this void in this paragraph and it feels as if something is missing, doesn't it? You can actually look in the source code of this page and you will see this:

<span style="visibility:hidden;">This is some invisible text that 
we cannot see but still takes up space inside 
of the element.</span>

This was the code that was actually used to create this effect. We can see that visibility property makes the desired element invisible (hidden) but it still takes up space.

We won't go into great detail about the collapse property and the visible value is default so this is not needed in order for an element to show. For example:

p.fancy {
     color:#ff9300;
     text-decoration:underline;
     font-size:x-small;
     visibility:visible; /*This is default, therefore not needed*/
}

Display

The display property defines how an element is displayed on the web page. The display property is very useful and particularly powerful. If you've ever wondered how to make those fancy top navigation menus like on this blog, we would use a certain value for the display property.

Values

  1. none - hides element completely (no box)
  2. block - creates a box (line breaks above and below)
  3. inline - creates inline element (no line breaks at all)
  4. inline-block - creates block but it is laid out as an inline box
  5. compact - basically this box will nest against another box is there is enough space
  6. inline-table - element will create a box with no breaks before or after the <table>
  7. list-item - creates list (like a ul) in a block but the li are inline elements
  8. run-in - your browser will create a block or inline box depending on how it is used 1
  9. table - this will behave like a table (a CSS alternative to th, td, and tr elements!)
  10. table-caption - behaves like a table caption
  11. table-header-group - behaves like a table header group
  12. table-row - behaves like a table row
  13. table-row-group - behaves like a table row group
  14. table-cell - behaves like a table cell
  15. table-column - behaves like a table column
  16. table-column-group - behaves like table column (like <colgroup>)
  17. table-footer - behaves like a table footer
  18. table-footer-group - behaves like a footer row group

As we can see there are many values we can have for the display property and each does something unique. These will take time to explain so I highly recommend you click on the download button below.
You may also want to check out Quirksmode for a very comprehensive overview of the display property.

display.zip
display.zip
Size: 67.97 KB

1. This is only supported in the latest version of IE and Opera 9.2 and Opera 10. All other browsers don't necessarily support this value. You can read all about the run-in value from W3C if you want to learn more about it.

Be Sociable, Share!