स्पेसिंग

सीएसएस पॉडकास्ट - 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 मार्जिन उस दिशा में उपलब्ध जगह इस्तेमाल करेगा जहां यह लागू किया गया है. इसका एक अच्छा उदाहरण यह है, फ़्लेक्सबॉक्स मॉड्यूल से मिलेगी, जहां आइटम एक-दूसरे से हट जाते हैं.

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 को शामिल करने पर, इसका मार्जिन अपने-आप छोटा नहीं होगा. इसे कॉन्टेंट वाले किसी भी बॉक्स के तौर पर माना जाएगा.

देखें कि आपको कितना समझ आया है

मार्जिन को छोटा करने के बारे में अपनी जानकारी की जांच करें

मार्जिन को छोटा होने से रोकना

अगर किसी एलिमेंट को पूरी तरह से पोज़िशन किया जाता है, 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 है.

फ़्लेक्सबॉक्स और ग्रिड, दोनों का इस्तेमाल करके स्पेस बनाए जा सकते हैं. इसके लिए, डिस्ट्रिब्यूशन और अलाइनमेंट की सुविधाओं का इस्तेमाल किया जा सकता है, जिसकी जानकारी हम ग्रिड मॉड्यूल और फ़्लेक्सबॉक्स मॉड्यूल होना चाहिए.

एक जैसे स्पेस बनाना

कोई रणनीति चुनना और उस पर बने रहना वाकई एक अच्छा आइडिया है ताकि आपको एक जैसा यूज़र इंटरफ़ेस बनाने में मदद मिल सके, जिसका फ़्लो और लय-ताल अच्छा हो. ऐसा करने का एक अच्छा तरीका है कि आप शब्दों के बीच की दूरी को एक जैसा रखें.

उदाहरण के लिए, आपके पास 20px का इस्तेमाल करने का विकल्प है एलिमेंट के बीच के सभी गैप को एक तरह से मापा जाता है. इसे गटर कहते हैं. इसलिए सभी लेआउट एक जैसे दिखते हैं और एक जैसे लगते हैं. फ़्लो कॉन्टेंट के बीच, वर्टिकल स्पेस के तौर पर 1em का इस्तेमाल भी किया जा सकता है, जो एलिमेंट के font-size के आधार पर एक जैसी स्पेसिंग बनाए रखता है. आप जो भी चुनें, तो आपको इन वैल्यू को वैरिएबल (या सीएसएस कस्टम प्रॉपर्टी) के तौर पर सेव करना चाहिए ताकि उन वैल्यू को टोकन किया जा सके और कंसिस्टेंसी को थोड़ा आसान बनाया जा सके.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

इस तरह की कस्टम प्रॉपर्टी का इस्तेमाल करके, उन्हें एक बार तय किया जा सकता है, इन्हें अपने पूरे सीएसएस में इस्तेमाल करें. जब उन्हें अपडेट किया जाता है, स्थानीय स्तर पर या वैश्विक स्तर पर, वैल्यू, कैस्केड से गुजरेंगी और अपडेट की गई वैल्यू दिखेंगी.

देखें कि आपको कितना समझ आया है

स्पेसिंग के बारे में अपनी जानकारी को परखें