Did you find this useful?
Socialize it today.


CSS Display and Visibility

Monday, March 26, 2012

tags CSS

In CSS, the display property specifies how an element is displayed, while the visibility property specifies if an element should be visible or hidden. The display property is very useful in CSS. However, it is also one of the least well known, especially by those just learning CSS.


Visibility Property

The visibility property can be used to show or hide elements. You should note that if you set the visibility property to invisible, the element still occupies the space on the page. If you want to make an element invisible and not take up space on the page, use the display property and set the value to none. The visibility property can be assigned the following values: visible (default), hidden, collapse (for tables only), and inherit. Some browsers do not support collapse or inherit. You should only use this property if you are tyring to hide an element and still allow it to occupy the space on the page.


.div1 {visibility:hidden;}


Display Property

The display property is very flexible and is a great tool in the CSS toolbox. There are many values that can be assigned to this property. However, the most common values are inline and block. This is because we can use these two values to change some of the element's default display behavior. For example, some HTML elements are of type: block such as headings, paragraphs, and divs. Other HTML elements such as span and anchor are inline. We can easily change the behavior of an inline element to act like a block element by using this property. You should note that 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 block elements nested within it.


span {display:block;}
li {display:inline;}


Here is a listing of the possible values you can specify for the display property. Not all of the values are supported by all of the browsers.


ValueDescription
noneThe element will not be displayed.
blockThe element is displayed as a block element.
inlineThe element is displayed as an inline element.
inline-blockPlaced as an inline element with other adjancent elements but behaves like a block element.
inline-tableElement is displayed as an inline table.
inheritInherits the display property of the parent element.
list-itemDisplayed as a list-item.
run-inBecomes an inline or block element depending on child elements.
tableElement is displayed a table.
table-captionElement is displayed a table caption.
table-cellElement is displayed a table cell.
table-columnElement is displayed a table column.
table-column-groupElement is displayed a table column group.
table-footer-groupElement is displayed a table footer group.
table-header-groupElement is displayed a table header row.
table-rowElement is displayed a table row.
table-row-groupElement is displayed a table row group.


The values inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group, and inherit are not supported in Internet Explorer 7 and earlier. Internet Explorer 8 requires a !DOCTYPE specified in the HTML document. Internet Explorer 9 does supports the values.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor HTML CSS: The Complete Reference CSS: The Missing Manual