डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Display and Visibility

CSS Display ये topic; CSS के लिए बहुत ही महत्वपूर्ण है | अगर आप किसी Element को display नहीं करना चाहते, inline elements को block में या block elements को inline में display करना चाहते है तो CSS Display का इस्तेमाल कर सकते है |

CSS Display ये Website के Layout को काफी अच्छे से संभाल लेता है | CSS Display के लिए display property का इस्तेमाल किया जाता है |

CSS Display ये topic सिखने से पहले कुछ Inline और Block-level Elements देखते है |


Some Inline Elements

Inline Elements ये अपने current line से शुरू हो जाते है | ये new line पर start नहीं होते है | ये अपने text के हिसाब से अपनी width लेता है | इसे सिद्ध करने के लिए Element पर border दी गयी है |

  • <a>
  • <img>
  • <input>
  • <span>
  • <textarea>

Some Block-level Elements

Block-level Elements ये new line पर start होते है | ये line की पूरी width लेता है | इसे सिद्ध करने के लिए Element पर border दी गयी है |

  • <h1>-<h6>

  • <form>
  • <div>
  • <table>

Which HTML Elements use 'display:none;' ?

जिन Elements पर दिया हुआ text display नहीं होता है वो सभी elements display:none; इस्तेमाल करते है |

  • <head>
  • <link>
  • <script>
  • <style>
  • <title>

Difference Between display:none; and visibility:hidden;

Example for display:none;

Example पर <h1> element को hidden नहीं बल्कि display ही नहीं किया गया है |

<style>
h1{
 display : none;
}
</style>

<h1>Hello World</h1>
Output :

Hello World

Example for visibility:hidden;

Example पर <h1> element को display किया गया है, लेकिन वह hidden है |

<style>
h1{
 visibility : hidden;
}
</style>

<h1>Hello World</h1>
Output :

Hello World

 


Overwrite display Property

Example 1 :

Example पर <h1> element के display:block इस default value से display:inline इस value में overwrite किया गया है |

<h1> element को overwrite करने से दिए गए दोनों <h1> elements एक ही line पर स्थित हुए है |

<style>
h1{
 display : inline;
}
</style>

<h1>Hello World </h1>
<h1>Hello Friends</h1>
Output :

Hello World

Hello Friends



Example 2 :

Example पर <a> element के display:inline इस value को display:block में overwrite किया गया है |

<style>
a{
 display : block;
}
</style>

<a href="css-text-in-hindi.php">CSS Text</h1>
<a href="css-colors-in-hindi.php">CSS Colors</h1>
Output :

display Related Properties

PropertyDescription
displayElement को किस प्रकार से display करना है उसके लिए इस्तेमाल किया जाता है |
visibilityElement को hidden या visible करने के लिए इस्तेमाल किया जाता है |