 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन २९ सीखेंगे।
पिछले लेसन में हम ने CSS border के बारे में सीखा।
आज हम CSS padding सीखेंगे।
CSS padding property
CSS padding property का उपयोग एक element के actual content और उस element के बॉर्डर में अंतर रखने के लिए होता है। यह बताता है की element की border उसके content कितनी दूर होनी चाहिए। हम padding एक ही प्रॉपर्टी में दे सकते हैं, जैसे -padding: value1 value2 value3 value4
Value1 top बॉर्डर का padding होता है, value2 right साइड का padding होता है, value3 bottom का और value4 left का padding होता है।
अगर हम एक ही value देते हैं तो वह चारों साइड्स के लिए होती है। जैसे
padding: 0.5vw;
Element के चारों साइड्स का बॉर्डर 0.5vw के अंतर पर आएगा।
अब हम हमारे कोडिंग में यह लिखते हैं। एक नयी Notepad file ओपन कीजिये। इस में lesson-28-2 का सारा कोड कॉपी कीजिये।
आप lesson-28-2 के PDF फाइल से यह कॉपी कर सकते हैं। इस में #header में यह लाइन इन्सर्ट कीजिये।
padding: 0.5vw;
इस फाइल को "Lesson-29" और "Lesson-29.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।
 |
| आकृति २९-१ CSS padding property |
अब HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति २९-२ CSS padding property |
हमारे हैडिंग में और उसके border में अंतर आया है। आप padding की वैल्यू को बढाकर और काम करके डिस्प्ले में फरक देखिये। आप जब lesson-31 में जाएंगे तब आप उस लेसन के आउटपुट की आकृति पर क्लिक कर सकेंगे और आउटपुट नए वेब पेज में ओपन होगा। उसमें आप हैडिंग के content और बॉर्डर में अंतर देखिये। यह padding है।
हम ने लेसन-३१ में यह डिस्प्ले किया है क्योंकि उसमें padding और margin दोनों डिस्प्ले किये हैं, ताकि आप यह समझ सके की padding और margin में अंतर क्या होता है। हम margin अगले लेसन में सीखनेवाले हैं।
ध्यान दीजिये: अगर हम padding property में तीन values देते हैं तो पहली value होती है top बॉर्डर के लिए, दूसरी value होती है right और left बॉर्डर के लिए, और तीसरी value bottom के लिए होती है।
अगर हम दो values देते हैं तो पहली value top और bottom के लिए होती है और दूसरी value right और left के लिए होती है।
हम चार साइड्स के लिए चार अलग अलग प्रॉपर्टीज दे सकते है। वह इस प्रकार होती है।
Padding-top property, padding-right property, padding-bottom property, and padding-left property
padding-top, padding-right, padding-bottom, and padding-left.उदाहरण के लिए
padding-top: 1vw;
हम padding के लिए कोई भी length के युनिट दे सकते हैं जैसे px, cm , pc वगैरह। Padding की value उस element के width के % में भी दे सकते हैं। इसी तरह हम दुसरे relative measurement भी दे सकते हैं।
Important Points:
१. Padding एक element का content और उसके बॉर्डर में का अंतर होता है। यह बताता है की बॉर्डर content से कितना दूर है।२. Padding top, bottom, right, और left बॉर्डर्स के लिए दे सकते हैं।
३. हम किसी भी length के unit में padding दे सकते हैं।
लेसन २८ लेसन २९
