३२. CSS box model in Hindi, CSS height in Hindi, CSS width in Hindi

HTML and CSS tutorial for beginners in Hindi

हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३२ सीखेंगे।

पिछले लेसन में हम ने CSS Outline के बारे में सीखा।

आज हम यह देखते हैं की CSS में box model क्या होता है।

CSS box model in Hindi

एक वेब पेज में डिस्प्ले किया हुआ किसी भी element के लिए एक बॉक्स होता है। वह element एक बॉक्स के अंदर डिस्प्ले होता है। हम इसे समझ लेते हैं।

Box model से हमें यह पता चलता है की एक element डिस्प्ले करने के लिए वेब पेज में कितनी जगह लगेगी।

हम ने इससे पहले देखा है की एक element को उसके content होता है, padding होता है, बॉर्डर होती है, और मार्जिन होता है। इन सब को मिलाकर हम यह समझ सकते हैं की element को डिस्प्ले करने के लिए वेब पेज में कितनी जगह लगनेवाली है। इस "box" के अंदर element डिस्प्ले होने वाला है। इस लिए एक element का बॉक्स ऐसा दिखता है।

आकृति ३२-१ CSS box model

तो एक element वेब पेज में डिस्प्ले करने के लिए कितनी जगह लगेगी?

Actual contents of element + padding + border width + margin

अब हम यह हमारे स्क्रिप्ट में लिखेंगे। एक नयी Notepad फाइल ओपन कीजिए। इस में lesson-31 का कोड कॉपी कीजिये।

हम header की स्टाइल में height and width देंगे। #header में यह लाइन्स इन्सर्ट कीजिये।

height: 10vw;
width: 80vw;


इस फाइल को "Lesson-32" और "Lesson-32.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।

आकृति ३२-२ CSS box model, CSS height property, CSS width property

इस का आउटपुट देखिये।

आकृति ३२-३ CSS box model, CSS height property, CSS width property

हम ने header के लिए जो height और weight  दिए हैं वह  डिस्प्ले हुए हैं।

अब हम देखते है की हमारा header डिस्प्ले करने के लिए कितनी जगह लगेगी।

  border: 0.5vw solid red;
  padding: 0.5vw;
  margin-bottom: 5vw;
  margin-top: 5vw;
  outline: 0.3vw solid green;
  height: 10vw;
  width: 80vw;

Element की total height = height of actual element (10)+padding(0.5)+border(0.5)+margin-top(5)+margin-bottom(5)

= 10+0.5+0.5+5+5 = 21vw.

Element की width = width of actual element (80)+padding(0.5)+border(0.5)

= 80+0.5+0.5 = 81vw.

ऐसा समझते है की हमने padding नहीं दिया है, तो ऊपर के calculation से उसको निकालना पड़ेगा। यह इतना आसान होता है।

Important Points:

१. Box model से हमें clearly समझ में आता है के एक element डिस्प्ले करने के लिए वेब पेज में कितनी जगह लगानेवाली है।
२. इस के लिए हम element का content, padding, border width, और मार्जिन को मिलाते हैं।

लेसन ३१                                  लेसन ३३