सीएसएस पॉडकास्ट - 013: स्पेसिंग
मान लें कि आपके पास तीन बॉक्स का एक संग्रह है, जो एक-दूसरे के ऊपर रखे गए हैं और आपको उनके बीच स्पेस रखना है. सीएसएस में इसे कितने तरीकों से किया जा सकता है?
margin प्रॉपर्टी से आपको ज़रूरत के हिसाब से जानकारी हो सकती है,
लेकिन यह ऐसे स्पेस भी जोड़ सकता है जो आपको नहीं चाहिए.
उदाहरण के लिए, इन एलिमेंट में से हर के बीच स्पेस को कैसे टारगेट किया जाता है?
इस मामले में, gap जैसी जानकारी ज़्यादा काम की हो सकती है.
यूज़र इंटरफ़ेस (यूआई) में स्पेसिंग को घटाने या बढ़ाने के कई तरीके हैं. हर एक तरीके की अपनी खूबियां और चेतावनियां हैं.
HTML रिक्ति
स्पेस एलिमेंट के लिए कुछ तरीके एचटीएमएल खुद ही देता है.
<br> और <hr> एलिमेंट से ब्लॉक की दिशा में एलिमेंट को स्पेस में रखा जा सकता है. अगर लैटिन भाषा की भाषा का इस्तेमाल किया जा रहा है, तो एलिमेंट को ऊपर से नीचे की ओर ले जाया जा सकता है.
अगर <br> एलिमेंट का इस्तेमाल किया जाता है, तो यह एक लाइन ब्रेक बनाएगा. यह बिलकुल वैसा ही होता है जैसे किसी वर्ड प्रोसेसर में Enter बटन दबाने पर किया जाता है.
<hr>, किसी भी तरफ़ स्पेस वाली एक हॉरिज़ॉन्टल लाइन बनाता है. इसे margin कहा जाता है.
एचटीएमएल एलिमेंट का इस्तेमाल करने के साथ,
एचटीएमएल इकाइयां स्पेस बना सकती हैं.
एचटीएमएल इकाई, वर्णों की एक रिज़र्व स्ट्रिंग होती है जिसे ब्राउज़र, वर्ण इकाइयों से बदल देता है.
उदाहरण के लिए,
अगर आप अपनी एचटीएमएल फ़ाइल में © टाइप करते हैं, तो
वह © वर्ण में बदल जाएगा.
इकाई को नॉन-ब्रेकिंग स्पेस वर्ण में बदल दिया जाता है,
जो एक इनलाइन स्पेस देता है.
हालांकि, सावधान रहें, क्योंकि इस वर्ण का नॉन-ब्रेकिंग आसपेक्ट रेशियो दो एलिमेंट को जोड़ देता है, जिसकी वजह से अजीब व्यवहार हो सकता है.
मार्जिन
अगर आपको किसी एलिमेंट के बाहर स्पेस जोड़ना है,
तो margin प्रॉपर्टी का इस्तेमाल करें.
मार्जिन अपने एलिमेंट के चारों ओर एक तकिया जोड़ने जैसा है.
margin प्रॉपर्टी, margin-top, margin-right, margin-bottom, और margin-left के लिए शॉर्टहैंड है.
margin शॉर्टहैंड, प्रॉपर्टी को एक खास क्रम में लागू करता है:
ऊपर, दाएं, नीचे, और बाईं ओर.
इन्हें याद रखने में परेशानी होती है: TRouBLe.
margin शॉर्टहैंड का इस्तेमाल एक, दो या तीन वैल्यू के साथ भी किया जा सकता है.
चौथा वैल्यू जोड़ने से, हर साइड को अलग से सेट किया जा सकता है.
इन्हें इस तरह लागू किया जाता है:
- सभी तरफ़ एक वैल्यू लागू हो जाएगी. (
margin: 20px). - दो वैल्यू: पहली वैल्यू ऊपर और नीचे, जबकि दूसरी वैल्यू को बाईं और दाईं तरफ़ से लागू किया जाएगा.
(
margin: 20px 40px) - तीन वैल्यू: पहली वैल्यू
top, दूसरी वैल्यूleftऔरrightहै, और तीसरी वैल्यूbottomहै. (margin: 20px 40px 30px).
मार्जिन को लंबाई, प्रतिशत या अपने-आप तय होने वाली वैल्यू से तय किया जा सकता है, जैसे कि 1em या 20%.
अगर प्रतिशत का इस्तेमाल किया जाता है,
तो वैल्यू का हिसाब आपके एलिमेंट में मौजूद ब्लॉक की चौड़ाई के आधार पर लगाया जाएगा.
इसका मतलब है कि अगर आपके एलिमेंट वाले ब्लॉक की चौड़ाई 250px
और आपके एलिमेंट की margin वैल्यू 20% है:
आपके एलिमेंट के हर तरफ़ का परिकलित मार्जिन 50px होगा.
मार्जिन के लिए, auto वैल्यू का भी इस्तेमाल किया जा सकता है.
सीमित साइज़ वाले ब्लॉक लेवल एलिमेंट के लिए, auto मार्जिन उस दिशा में उपलब्ध जगह लेगा जहां इसे लागू किया गया है.
flexbox मॉड्यूल से,
यह एक अच्छा उदाहरण है, जहां आइटम एक-दूसरे से दूर जाते हैं.
auto मार्जिन का एक और अच्छा उदाहरण, हॉरिज़ॉन्टल तौर पर सेंटर किया गया रैपर है. इसकी चौड़ाई ज़्यादा से ज़्यादा है.
इस तरह के रैपर का इस्तेमाल, अक्सर वेबसाइट पर बीच में एक जैसा कॉलम बनाने के लिए किया जाता है.
.wrapper {
max-width: 400px;
margin: 0 auto;
}
यहां, ऊपर और नीचे (ब्लॉक) किनारों से मार्जिन हटा दिया जाता है और auto बाईं और दाईं ओर (इनलाइन) किनारों के बीच के स्पेस को शेयर करता है.
नेगेटिव मार्जिन
मार्जिन के लिए भी नेगेटिव वैल्यू का इस्तेमाल किया जा सकता है. पास के सिबलिंग एलिमेंट के बीच स्पेस जोड़ने के बजाय, यह उनके बीच स्पेस कम कर देगा. अगर नेगेटिव वैल्यू, उपलब्ध स्पेस से ज़्यादा है, तो एलिमेंट ओवरलैप हो सकते हैं.
मार्जिन छोटा करें
मार्जिन छोटा करना एक मुश्किल कॉन्सेप्ट है, लेकिन इसे इंटरफ़ेस बनाते समय आम तौर पर इस्तेमाल किया जाएगा. मान लें कि आपके पास दो एलिमेंट हैं: एक हेडिंग और एक पैराग्राफ़, जिसमें वर्टिकल मार्जिन हो:
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
पहली नज़र में,
आपको यह सोचकर माफ़ कर दिया जाएगा कि पैराग्राफ़ को शीर्षक से 5em की दूरी पर रखा जाएगा,
क्योंकि 2rem और 3rem को मिलाकर 5rem की गिनती की जाती है.
हालांकि, वर्टिकल मार्जिन कम हो जाता है, लेकिन असल में स्पेस 3rem होता है.
मार्जिन को छोटा करने की सुविधा, आस-पास के दो एलिमेंट की सबसे बड़ी वैल्यू को चुनकर काम करती है.
इन एलिमेंट के किनारों पर वर्टिकल मार्जिन को सेट किया जाता है.
h1 का निचला हिस्सा p के शीर्ष से मिलता है,
इसलिए h1 के निचले मार्जिन और p के ऊपरी मार्जिन की सबसे बड़ी वैल्यू को चुना जाता है.
अगर h1 में सबसे नीचे का मार्जिन 3.5rem होता, तो
दोनों के बीच की जगह 3.5rem होगी, क्योंकि यह 3rem से ज़्यादा है.
सिर्फ़ मार्जिन को छोटा करने से रोकें, इनलाइन (हॉरिज़ॉन्टल) मार्जिन को नहीं.
मार्जिन छोटा करने से भी खाली एलिमेंट को इस्तेमाल करने में मदद मिलती है.
अगर आपके पास ऐसा पैराग्राफ़ है जिसमें ऊपरी और सबसे निचला मार्जिन 20px है, तो यह सिर्फ़ 20px स्पेस बनाएगा, 40px नहीं.
अगर इस एलिमेंट के अंदर कुछ भी जोड़ा जाता है,
जिसमें padding भी शामिल है, तो इसका मार्जिन अपने-आप छोटा नहीं होगा और इसे कॉन्टेंट वाले किसी भी बॉक्स की तरह माना जाएगा.
आपने जो सीखा है उसकी जांच करें
मार्जिन को कम करने के बारे में अपनी जानकारी की जांच करें
अगर दो एलिमेंट के ऊपर का मार्जिन 20 पिक्सल और नीचे का मार्जिन 30 पिक्सल है, तो उनके बीच कितनी जगह होगी?
मार्जिन को छोटा होने से रोकना
अगर position: absolute का इस्तेमाल करके किसी एलिमेंट को बिलकुल सही जगह पर सेट किया जाता है,
तो मार्जिन अब छोटा नहीं होगा.
float प्रॉपर्टी का इस्तेमाल करने पर भी मार्जिन कम नहीं होगा.
अगर आपके पास ब्लॉक मार्जिन वाले दो एलिमेंट के बीच कोई मार्जिन नहीं है, तो मार्जिन भी छोटा नहीं होगा, क्योंकि ब्लॉक मार्जिन वाले दो एलिमेंट अब आस-पास के सिबलिंग नहीं हैं: वे सिर्फ़ सिबलिंग हैं.
लेआउट लेसन में आपने सीखा कि फ़्लेक्सबॉक्स और ग्रिड कंटेनर, ब्लॉक कंटेनर की तरह ही होते हैं, लेकिन अपने चाइल्ड एलिमेंट को काफ़ी अलग तरीके से हैंडल करते हैं. मार्जिन को छोटा करने पर भी ऐसा ही होता है.
अगर हम लेसन से मूल उदाहरण लेते हैं और कॉलम की दिशा के साथ फ़्लेक्सबॉक्स लागू करते हैं, तो हाशिए छोटे करने के बजाय मिला दिए जाते हैं. इससे लेआउट वर्क के साथ अनुमान लगाया जा सकता है, फ़्लेक्सबॉक्स और ग्रिड कंटेनर को इसी काम के लिए डिज़ाइन किया गया है.
मार्जिन और मार्जिन को समझना मुश्किल हो सकता है. लेकिन, उनके काम करने के तरीके को विस्तार से समझना बहुत काम का है. इसलिए, इस बारे में ज़्यादा जानकारी देने वाले का सुझाव दिया जाता है.
पैडिंग (जगह)
margin की तरह, अपने बॉक्स के बाहर स्पेस बनाने के बजाय, padding प्रॉपर्टी आपके बॉक्स के अंदर स्पेस बनाती है, जैसे कि इन्सुलेशन.
इस बात के आधार पर कि किस बॉक्स मॉडल का इस्तेमाल किया जा रहा है—जिसे बॉक्स मॉडल लेसन
—padding में फिर से शामिल किया गया था, एलिमेंट के सभी डाइमेंशन पर भी असर डाल सकता है.
padding प्रॉपर्टी, padding-top, padding-right, padding-bottom, और padding-left के लिए शॉर्टहैंड है.
margin की तरह ही, padding में भी लॉजिकल प्रॉपर्टी हैं:
padding-block-start, padding-inline-end, padding-block-end, और padding-inline-start.
स्थिति
साथ ही, इसे लेआउट मॉड्यूल में भी शामिल किया जाता है. अगर position के लिए ऐसी वैल्यू सेट की जाती है जो static के अलावा कोई और है, तो आपके पास top, right, bottom, और left प्रॉपर्टी के साथ स्पेस एलिमेंट इस्तेमाल करने का विकल्प होता है.
ये दिशानिर्देश वाली वैल्यू के काम करने के तरीके में कुछ अंतर होते हैं:
position: relativeवाला कोई एलिमेंट, दस्तावेज़ के फ़्लो में अपनी जगह बनाए रखेगा, भले ही आपने इन वैल्यू को सेट किया हो. ये नतीजे, आपके एलिमेंट की पोज़िशन के हिसाब से भी होंगे.position: absoluteवाला कोई एलिमेंट, मिलते-जुलते पैरंट की पोज़िशन के हिसाब से डायरेक्शनल वैल्यू पर आधारित होगा.position: fixedवाला एलिमेंट, व्यूपोर्ट पर दिशा देने वाली वैल्यू आधारित करेगा.position: stickyवाला कोई एलिमेंट, दिशा-निर्देश वाली वैल्यू सिर्फ़ तब लागू करेगा, जब वह डॉक की गई/अटकी हुई स्थिति में हो.
लॉजिकल प्रॉपर्टी मॉड्यूल में, आपको inset-block और inset-inline प्रॉपर्टी के बारे में जानकारी मिलती है. इनकी मदद से, राइटिंग मोड के हिसाब से डायरेक्शन वाली वैल्यू सेट की जा सकती हैं.
दोनों प्रॉपर्टी शॉर्टहैंड हैं, जो start और end वैल्यू को जोड़ती हैं. इस तरह, start और end या दो अलग-अलग वैल्यू के लिए, सेट की जाने वाली एक वैल्यू को स्वीकार किया जाता है.
ग्रिड और फ़्लेक्सबॉक्स
आखिर में, ग्रिड और फ़्लेक्सबॉक्स, दोनों में gap प्रॉपर्टी का इस्तेमाल करके, चाइल्ड एलिमेंट के बीच स्पेस बनाया जा सकता है.
gap प्रॉपर्टी, row-gap और column-gap के लिए शॉर्टहैंड है. यह एक या दो वैल्यू स्वीकार करती है. ये लंबाई या प्रतिशत हो सकती हैं.
आपके पास unset, initial, और inherit जैसे कीवर्ड का इस्तेमाल करने का भी विकल्प है.
अगर सिर्फ़ एक वैल्यू तय की जाती है, तो पंक्तियों और कॉलम, दोनों पर एक ही gap लागू होगा. हालांकि, दोनों वैल्यू तय करने पर, पहली वैल्यू row-gap और दूसरी वैल्यू column-gap होगी.
फ़्लेक्सबॉक्स और ग्रिड, दोनों के साथ-साथ डिस्ट्रिब्यूशन और अलाइनमेंट की क्षमताओं का इस्तेमाल करके भी स्पेस बनाया जा सकता है. इन सुविधाओं के बारे में हम ग्रिड मॉड्यूल और flexbox मॉड्यूल में करेंगे.
शब्दों के बीच एक जैसा स्पेस रखें
रणनीति चुनने और उसके साथ कायम रहना एक बहुत अच्छा आइडिया है. इससे आपको एक ऐसा यूज़र इंटरफ़ेस बनाने में मदद मिलेगी जिसका फ़्लो और फ़्लो अच्छा हो. इसे हासिल करने का एक अच्छा तरीका यह है कि आप स्पेसिंग को लगातार बनाए रखें.
उदाहरण के लिए, एलिमेंट के बीच के सभी गैटर के लिए, 20px को एक जैसा माप के तौर पर इस्तेमाल किया जा सकता है. इसे गटर भी कहा जाता है, ताकि सभी लेआउट एक जैसे दिखें और एक जैसे लग सकें.
फ़्लो कॉन्टेंट के बीच वर्टिकल स्पेसिंग के तौर पर, 1em का इस्तेमाल भी किया जा सकता है. इससे एलिमेंट की font-size के हिसाब से, एक जैसा स्पेस मिलेगा.
आप चाहे जो भी चुनें,
आपको इन वैल्यू को वैरिएबल (या सीएसएस कस्टम प्रॉपर्टी) के तौर पर सेव करना चाहिए, ताकि उन वैल्यू को टोकनाइज़ किया जा सके और समानता को थोड़ा आसान बनाया जा सके.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
इस तरह की कस्टम प्रॉपर्टी का इस्तेमाल करके, उनकी जानकारी एक बार तय की जा सकती है. इसके बाद, उन्हें अपने पूरे सीएसएस में इस्तेमाल किया जा सकता है. जब उन्हें स्थानीय तौर पर या पूरी दुनिया में अपडेट किया जाता है, तो वैल्यू कैस्केड से होकर गुज़रती हैं और अपडेट की गई वैल्यू दिखने लगती हैं.
आपने जो सीखा है उसकी जांच करें
स्पेसिंग के बारे में अपनी जानकारी को परखें
शब्दों के बीच स्पेस देने के लिए एचटीएमएल का इस्तेमाल तब सुरक्षित होता है, जब...
बॉक्स के अंदर स्पेस बनाने के लिए, इनका इस्तेमाल करें...
बॉक्स के बाहर स्पेस बनाने के लिए, इसका इस्तेमाल करें...
बॉक्स के बीच स्पेस बनाने के लिए, इनका इस्तेमाल करें...