CSS in Hindi – Introduction to Display Properties

  • CSS display property in Hindi
  • Values of inline in Hindi
  • Example of display block value in Hindi

CSS in Hindi – Display Property

अगर आप एक web site बना रहे है तो कभी न कभी हमे कुछ content को hide करना पड़ता है for example अगर हम एक web site बना रहे है तो ऐसा भी हो सकता है की web site मे कुछ ऐसा content हो जिसे हम web page पर दिखाना नही चाहते है | या ऐसा कोई section हो जिसे हम hide करना चाहते है |

तो यह possible है display property के जरिये क्योकि display property एक ऐसा property है जिसके through हम html के किसी भी section को बड़े ही आसानी से hide कर सकते है |

html के किसी भी element या section को hide करने के लिए display property provide की गयी है लेकिन display property मे अलग अलग value का use करते है | इनकी list निचे दी जा रही है |

  • none
  • inline
  • block
  • inline-block
  • list-item
  • table
  • initial
  • inherit

ऊपर दिये गये blocks मे देख सकते है वहा पर display property की कुछ values दी गयी है जिनका काम अलग अलग कामो मे किया जाता है | अब चलिए एक एक करके सभी values के बारे मे जानते है |

None Value

जब भी हम html के किसी element या section पर none value का use करते है तो हमारा element या section web page से गायब हो जाता है या remove हो जाता है पर वह element या section html के code मे रहता है जिसे जरुरत पड़ने पर use भी कर सकते है | अब निचे दिये गये code को देखे |

<html>
<head>
<style type="text/css">
#div1 { width: 100px; 
           height: 100px; 
           border: 1px solid;
           display: none;
         }
</style>
</head>
<body>
<div id="div1">
<p>Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
</body>
</html>

Inline Value

जब भी हम html के किसी tag पर display inline property का use करते है तो हमारा tag inline हो जाता है for example अगर हम दो heading tags create करते है तो web page पर दोनों के दोनों heading अलग अलग lines मे show होते है और अगर आप दोनों heading पर display inline property का use कर लेते है तो आपका दोनों heading एक ही लाइन मे show होंगे क्योकि हमारा heading inline मे convert हो जायेगा अब निचे दिये गये code को देखे |

<html>
<head>
<style type="text/css">
#p1 { 
           display: inline;
           background-color: red;
        }
#p2 { 
           display: inline;
           background-color: red;
        }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

Block Value

जब हम display property का value block define करते है तो हमारा element block element मे convert हो जाता है | for example html मे कई सारे tags inline tags होते है जैसे <a> और <span> अगर इन दोनों tags के अन्दर कोई भी text हो या link हो सब के सब एक ही लाइन मे show होने लगते है | इसी problem को solve करने के लिए हम block value का use करते है | जिससे हमारा link या text अलग अलग लाइन मे show होने लगता है | अब निचे दिये गये code को देखे |

<html>
<head>
<style type="text/css">
a { 
           display: block;
           background-color: red; }
span { 
           display: block;
           background-color: red; }
</style>
</head>
<body>
<a href=""><p>Easy Hindi Tutorials is a best blog of computer programming</p></a>
<span>Easy Hindi Tutorials is a best blog of computer programming</span>
<span>Easy Hindi Tutorials is a best blog of computer programming</span>
</body>
</html>

inline-block Value

जब आप display property का value inline-block define करते है तो आपका element inline element मे convert हो जाता है |

for example अगर आप div tag को inline tag मे convert करना चाहते है तो आप display property का value inline-block define कर सकते है |

<html>
<head>
<style type="text/css">
#div1 { border: 2px solid; display: inline-block; }
#div2 { border: 2px solid; display: inline-block; }
#div3 { border: 2px solid; display: inline-block; }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
CSS Padding Property CSS Overflow Property
Previous Next