Shobha
The best way to predict the future is to invent it
What is the difference between visibility: hidden and display: none?
The CSS properties visibility: hidden and display: none are both used to control the visibility of elements, but they work in different ways.
1. visibility: hidden:
This property hides the element visually but does not remove it from the document flow. The element still occupies space within the layout, and its size and position are preserved, even though it is not seen by the user. This means that while it is invisible, it continues to influence the positioning of other elements around it.
2. display: none:
This property completely removes the element from the document layout, causing it to take up no space at all. When applied, the element is entirely "removed" from the page, and it has no effect on the position or size of any surrounding elements. It’s as if the element does not exist in the flow of the document
1. visibility: hidden:
This property hides the element visually but does not remove it from the document flow. The element still occupies space within the layout, and its size and position are preserved, even though it is not seen by the user. This means that while it is invisible, it continues to influence the positioning of other elements around it.
2. display: none:
This property completely removes the element from the document layout, causing it to take up no space at all. When applied, the element is entirely "removed" from the page, and it has no effect on the position or size of any surrounding elements. It’s as if the element does not exist in the flow of the document