Explain the role of display and visibility properties in CSS with examples.
The Display and visibility property specifies whether or not an element is visible.
The visibility property
The initial value of the visibility property is visible, simply meaning that the element is visible unless you change it .
example:
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: CornflowerBlue;
}
</style><div class="box" style="visibility: hidden;">Box 2</div>
<div class="box">Box 3</div>
→ Three boxes but the middle one has been made invisible by setting the visibility property to hidden. If you try the example, you will notice one very important thing: While the second box is not there, it does leave a pretty big hole in the page. Or in other words: The element can't be seen, but the browser still reserves the space for it!
The display property
If you try the examples, you'll immediately notice the difference: The second box has vanished without a trace, when we used the none value for the display property.
Example:-
The property for doing so is in fact the display property, and while it is used a lot for hiding elements, it is also used for a range of other things - for instance to shift an element between the inline and block type.
In fact, if you have hidden an element by setting display to none, the way to get it back will often be to set display to either inline or block.