CSS width Property क्या हैं पूरी जानकारी हिंदी में? – Hindi Tutorial

हेल्लो दोस्तों! आज हम इस आर्टिकल में  CSS width Property  के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-

CSS width Property क्या हैं पूरी जानकारी हिंदी में? - Hindi Tutorial

CSS Width Property का परिचय

कोई Element Horizontally जितनी जगह Browser Window में लेता हैं. वह उस Element की Width कहलाती हैं.

WhatsApp Group Join Now
Telegram Group Join Now

width Property द्वारा केवल Element Content Area की Width Set होती हैं. इसमें Padding, Border और Margin शामिल नहीं रहता हैं. इसके बारे में अधिक जानकारी के लिए आप हमारे CSS Box Model Tutorial को पढ सकते हैं.

By Default प्रत्येक Element के लिए Width Set रहती हैं. इस Situation में Browser Elements के लिए Width Calculate करता हैं. यदि आप Auto पर निर्भर नही रहना चाहते हैं तो आप किसी भी Element की Width pxcmpt और % में Set कर सकते हैं.

CSS Width Property के विभिन्न प्रकार

Element की Width Set करने के लिए CSS द्वारा कई Width Properties उपलब्ध करवाई जाती हैं. इन Properties के द्वारा आप Element की Width को Control कर सकते हैं.

इसे पढ़े :-  CSS Height Property क्या हैं पूरी जानकारी हिंदी में? - Hindi Tutorial

width Property

width Property का इस्तेमाल Element की Width Set करने के लिए किया जाता हैं. मतलब आप किसी Particular Element को Webpage पर Horizontally कितना Space देना चाहते हैं. आइए इसे एक उदाहरण से समझते हैं.

इसे Try कीजिए

<!DOCTYPE html>
   <html>
        <head>
             <title>CSS Width Examples</title>

        <style type=”text/css”>
          p {
            width: 300px; border: 3px solid red;
              }

        </style>
<body>
       <p>This is a Paragraph. This paragraph text has written in English. This paragraph
        is 300px wide and has a red border with 3px.</p>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

max-width Property

 

इस Property का इस्तेमाल किसी Element की अधिकतम यानि Maximum Width Set करने के लिए किया जाता हैं. जब आप किसी Element की Maximum Width Set कर देते हैं तो उस Element की Width इससे ज्यादा नहीं हो सकती हैं.

max-width Property के द्वारा Element को Responsive बनाने के लिए किया जाता हैं. ताकि Element उपलब्ध Viewport (Display Size) के अनुसार अपना आकार बदल सके.

इसे Try कीजिए

<!DOCTYPE html>
   <html>
     <head>
           <title>CSS Maximum Width Examples</title>

     <style type=”text/css”>
          p {
                max-width: 300px; border: 3px solid red;
              }

      </style>
       <body>
            <p>This is a Paragraph. This paragraph text has written in English. 
               This paragraph is 300px wide and has a red border with 3px.</p>
        </body>

  </html>
WhatsApp Group Join Now
Telegram Group Join Now

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

इसे पढ़े :-  CSS Border का परिचय (CSS border properties) - Tutorial in Hindi

 

 

Note – इसका प्रभाव देखने के लिए ब्राउजर विंडो को छोटा कर के देखिए.

 

Min-property

 

इस Dimension Property द्वारा किसी Element की कम से कम यानि Minimum Width Set की जाती हैं. मतलब वह Element Set की गई कम से कम Width से कम Width में नही दिखाई देगा.

इसे Try कीजिए

<!DOCTYPE html>
    <html>
    <head>
         <title>CSS Minimum Width Examples</title>

     <style type=”text/css”>
          p {
                min-width: 400px; border: 3px solid red;
               }

       </style>
       <body>
              <p>This is a Paragraph. This paragraph text has written in English. 
               This paragraph’s minimum width is 400px and has a red border with 3px.</p>
       </body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

Leave a Reply

error: Content is protected !!
Scroll to Top