 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३० सीखेंगे।
पिछले लेसन में हम ने CSS padding के बारे में सीखा।
आज हम CSS margins के बारे में सीखेंगे।
CSS margin property
CSS margin यह बताता है की एक element का margin कितना है। दूसरा element इस margin में नहीं आ सकता है। तो padding और margin में क्या फरक है? Padding बॉर्डर के अंदर का अंतर होता है और मार्जिन बॉर्डर के बाहर का अंतर होता है। Element के actual content से बॉर्डर तक का अंतर padding होता है। बॉर्डर के बाहर element का मार्जिन होता है। Margin के बाद दूसरा element डिस्प्ले होता है।अगर एक इमेज left से 10vw पर डिस्प्ले होती है, इसका मतलब इमेज का left मार्जिन 10vw है।
Margin के rules padding के rules जैसे ही होते हैं।
हम margin के बारे में सीखेंगे। जैसे हम padding एक ही प्रॉपर्टी में दे सकते हैं वैसे ही margin एक ही प्रॉपर्टी में दे सकते हैं। यह इस प्रकार होता है -
margin: value1 value2 value3 value4
Value1 होता है top मार्जिन, value2 right मार्जिन होता है, value3 bottom और value4 left मार्जिन होता है।
अगर margin में एक ही value देते हैं तो वह चारों साइड को apply होती है।
margin: 1vw;
हम margin में तीन values सकते हैं। इस में पहली value top के लिए, दूसरी value right और left के लिए, और तीसरी value bottom के लिए होती है।
अगर हम दो values देते हैं तो पहली value top और bottom के लिए होती है और दूसरी value right और left के लिए होती है।
CSS margin-top property, CSS margin-right property, CSS margin-bottom property, and CSS margin-left property
हर एक साइड के लिए अलग अलग property भी दे सकते हैं। यह चार प्रॉपर्टीज हैं -margin-top, margin-right, margin-bottom, and margin-left.
उदाहरण के लिए
margin-top: 2 vw;
अब हम margin के लिए कोड लिखते हैं। एक नयी Notepad file ओपन कीजिये और उस फाइल में lesson-29 का सारा कोड कॉपी कीजिये।
Lesson-29 के कोड का PDF देखने के लिए यहाँ क्लिक कीजिये।
Style में #header के अंदर यह कोड लिखिए:
margin-bottom: 5vw;
margin-top: 5vw;
margin-left: 5vw;
margin-right: 5vw;
इस फाइल को "Lesson-30" और "Lesson-30.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।
 |
| आकृति ३०-१ CSS margins |
HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३०-२ CSS top and bottom margins |
हेडिंग के चारों साइड में मार्जिन्स डिस्प्ले हुई है। इस में हम padding और मार्जिन दोनों देख सकते हैं। Padding से बॉर्डर के अंदर अंतर आता है और margin से बॉर्डर के बाहर अंतर आता है।
आप जब lesson-31 में जाएंगे तब आप उस लेसन के आउटपुट की आकृति पर क्लिक कर सकेंगे और आउटपुट नए वेब पेज में ओपन होगा। उस पेज में हमने padding और margin दोनों डिस्प्ले किये हैं, ताकि आप यह समझ सके की padding और margin में अंतर क्या होता है।
Margins के units px, cm, pc वगैरह होते हैं। इस को हम percentage में भी दे सकते हैं। यह element के width का % होता है। इसी तरह Margins relative units में भी दे सकते हैं।
अगर हम margin: auto; देते हैं तो ब्राउज़र उस element की width देखता है और बाकी का space right और left में equal divide करता हैं। इस तरह से अपने आप centering हो जाता है।
Important Points:
१. CSS margin से हम element के लिए border के बाहर का space देते हैं। दूसरा element इस space के बाद डिस्प्ले होता है।२. हम top, bottom, right, और left के लिए अलग अलग margin properties दे सकते हैं।
३. हम किसी भी length के unit में margin दे सकते हैं।
लेसन २९ लेसन ३१
