Difference Between Display None and Visibility None Property in CSS

Difference Between Display None and Visibility Hidden Property in CSS | Display None and Visibility Hidden के बीच अंतर 

Display none or visibility hidden are CSS properties. Both are used to hide the element. 
Display none or visibility hidden CSS की  properties है। दोनों का उपयोग element को छिपाने के लिए किया जाता है।

Difference between display none and visibility hidden with Code Example:

<!DOCTYPE html>
<html>
<head>
<style>
.first-div{
    background-color: red;
    padding:100px;
    display: none;
}
.second-div{
    background-color: #000000;
    padding:100px;
    color: #ffffff;
    visibility: hidden;
}
</style>
</head>
<body>
<div class="first-div">
<p>It is a long established fact that a reader will be distracted by the readable content of a page <br>
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal<br> 
distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<div class="second-div">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's<br> 
standard dummy text ever since the 1500s,<br>
 when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</body>
</html>

Output without display none or visibility hidden property: 


Difference-Between-Display-None-and-Visibility-None-Property-in-CSS

When Using Display None Property

Display none property is hide the element and takes no space.
Display none property तत्व को छुपाता है और कोई  space नहीं लेता है।

Difference-Between-Display-None-and-Visibility-None-Property-in-CSS

In the above example div first hide because display property apply in this element but they don't contain any space

When Using Visibility Hidden Property

In visibility hidden property element is not visible, but it affects the layout because it takes space.
Visibility hidden property में element दिखाई नहीं देता | लेकिन यह लेआउट को प्रभावित करता है क्योंकि यह space लेता है।

Difference-Between-Display-None-and-Visibility-None-Property-in-CSS


If you have any doubt then watch this video in hindi language with easy explanation----> Difference between display none and visibility hidden in hindi

Click Here For More Information: HTML and CSS Information

Previous
Next Post »

Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon