मार्जिन
मार्जिन
मार्जिन, CoddyKit पर HTML for Kids का एक निःशुल्क पाठ है। यह 1 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह HTML for Kids सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML for Kids पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
परिचय
CSS में मार्जिन सबसे महत्वपूर्ण विषयों में से एक है।
मार्जिन वे खाली स्थान होते हैं जिन्हें हम किसी एलिमेंट की सीमाओं के चारों ओर बनाते हैं।
मार्जिन की सभी दिशाओं की व्याख्या
मार्जिन बनाते समय, एलिमेंट का प्रकार चाहे जो भी हो, हमें इसे 4 दिशाओं (ऊपर, दाएँ, नीचे और बाएँ) के रूप में नहीं सोचना चाहिए।
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>चेतावनी
जिस प्रकार हम मार्जिन को कोई निश्चित मान दे सकते हैं, उसी प्रकार हम इसे प्रतिशत मान भी दे सकते हैं।
चेतावनी
जिस तरह हम margin मान को कोई विशिष्ट मान दे सकते हैं, उसी तरह हम उसे प्रतिशत मान भी दे सकते हैं।
मार्जिन का संक्षिप्त रूप
पिछले उदाहरण में, बॉक्स के सभी पहलुओं पर मार्जिन लगाने के लिए हमें कोड की 4 पंक्तियाँ लिखनी पड़ी थीं।
CSS हमें छोटा कोड लिखने के लिए मार्जिन का शॉर्टकट प्रदान करता है।
मार्जिन प्रॉपर्टी निर्धारित करने के बाद, हम अपने मार्जिन मानों को क्रमशः ऊपर, दाएँ, नीचे और बाएँ के लिए उनके बीच एक स्पेस छोड़कर लिख सकते हैं (अर्थात् घड़ी की दिशा में)।
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
ऋणात्मक मार्जिन के बारे में चेतावनी
मार्जिन ऋणात्मक मान ले सकते हैं। अगले पाठ में देखे जाने वाले पैडिंग का मान ऋणात्मक नहीं हो सकता।
मार्जिन ऑटो
हम अपने एलिमेंट को क्षैतिज रूप से केंद्रित करने के लिए मार्जिन प्रॉपर्टी के auto मान का उपयोग करेंगे। स्क्रीन रिज़ॉल्यूशन चाहे जो भी हो, एलिमेंट स्क्रीन पर क्षैतिज रूप से केंद्रित रहेगा।
मान लीजिए कि स्क्रीन 1200px की है और हमारा एलिमेंट 400px का है। हमारा एलिमेंट बाएँ और दाएँ 400px के खाली स्थानों के बीच केंद्रित होगा।
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>बधाई हो
बधाई हो 🎉
इस सेक्शन में हमने CSS Margins सीखे।
अगले सेक्शन में हम CSS Paddings सीखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 16
- पाठ
- 35
अक्सर पूछे जाने वाले प्रश्न
क्या “मार्जिन” पाठ निःशुल्क है?
हाँ—“मार्जिन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और HTML for Kids पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। HTML for Kids पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
“मार्जिन” में मैं क्या सीखूँगा?
मार्जिन आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML for Kids का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML for Kids शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML for Kids शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 1 में से 1वाँ पाठ है।
“मार्जिन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML for Kids पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML for Kids पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।