The visibility property specifies whether a box generated by an element will be rendered visible on the canvas or not.
Unlike the display property with the value none, the elements made invisible with the visibility property still affect the layout; therefore they exist in the elements flow but are not rendered on the screen.
The visibility property contains following information:
- value: visible, hidden, collapse or inherit;
- initial: visible;
- applies to: all elements;
- inherited: yes;
- percentages: N/A;
- media: visual;
- computed value: as specified.
The value hidden hides the box (makes it fully transparent) and the value visible ensures the box is visible. If a descendant box have the value set to visible it will be rendered visible even if its parent (ancestor) is set to hidden.
The value collapse affects the table elements such as rows, row groups, columns and column groups, in any other case it has the same meaning as value the hidden.
CSS element's visibility example: