CSS Visibility
/*
The visibility property is used to display or hide specified HTML elements. The visibility property value as hidden makes specified element invisible. An element made hidden with visibility: hidden will occupy element’s space.
The different between these two properties to make elements hidden is that elements hidden by display: none property will not occupy any space or web page will look like there is no element.
Whereas element made hidden with visibility: hidden will occupy element’s space.
Example of using Visibility property to make elements hidden
The example below shows how to hide Div and heading 2 elements with visibility: hidden property value. Heading1 and paragraph are visible so you can notice spaces.
Experience this example online
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| <html> <head> <style> /*Using CSS visibility*/ h1 { font-size:16px; } h2 { visibility:hidden; } div { border: solid 1px black; color: #355681; visibility:hidden; } p { border: solid 1px black; color: #355681; } </style> </head> <body> <h1>This is not hidden heading 1</h1> <h2>This is hidden heading 2</h2> <div>This is hidden Div</div> <p>Paragraph is not hidden</p> </body> </html> |
Also see CSS display
Leave A Comment?