CSS - display:none vs. visibility:hidden

The CSS21 specification defines two properties that affect HTML element visibility: display and visibility.

You can make an element non-visible by using either display:none or visibility: hidden.

display: none removes the element from its normal position in the document flow, which causes the browser to recalculate document layout, and repaint.

visibility: hidden makes the element invisible, but does not remove it from the document flow. Layout is not affected.

:
inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none

Element is not visible, and is removed from layout.

A B C
:
visible | hidden | collapse

Element is not visible, but participates in layout.

A B C

Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath