जिस तरह से ब्राउज़रों ने सफेद स्थान को संभाला है, वह पहली बार में बहुत सहज नहीं है, खासकर यदि आप तुलना करते हैं कि हाइपरटेक्स्ट मार्कअप भाषा वर्ड प्रोसेसिंग प्रोग्राम के सापेक्ष सफेद स्थान को कैसे संभालती है। वर्ड प्रोसेसिंग सॉफ्टवेयर में, आप दस्तावेज़ में बहुत सारी रिक्ति या टैब जोड़ सकते हैं और वह रिक्ति दस्तावेज़ की सामग्री के प्रदर्शन में दिखाई देगी। यह WYSIWYG डिज़ाइन HTML या वेब पेजों के मामले में नहीं है।
प्रिंट में रिक्ति
वर्ड प्रोसेसिंग सॉफ्टवेयर में, तीन प्राथमिक व्हाइटस्पेस वर्ण हैं: अंतरिक्ष, टैब, तथा कैरिज रिटर्न. इनमें से प्रत्येक वर्ण एक अलग तरीके से कार्य करता है, लेकिन HTML में, ब्राउज़र उन सभी को अनिवार्य रूप से समान रूप से प्रस्तुत करते हैं। चाहे आप अपने में एक स्थान रखें या १०० रिक्त स्थान एचटीएमएल मार्कअप या टैब और कैरिज रिटर्न के साथ अपनी रिक्ति को मिलाएं, इन सभी को एक स्थान पर संघनित किया जाएगा जब पृष्ठ द्वारा प्रस्तुत किया जाएगा ब्राउज़र. वेब डिज़ाइन शब्दावली में, इसे के रूप में जाना जाता है सफेद जगह का पतन. आप वेब पेज में व्हॉट्सएप जोड़ने के लिए इन विशिष्ट स्पेसिंग कुंजियों का उपयोग नहीं कर सकते हैं क्योंकि ब्राउज़र में बार-बार रिक्त स्थान को ब्राउज़र में रेंडर करने पर ब्राउज़र केवल एक स्थान में सिमट जाता है,
HTML टैब और स्पेसिंग बनाने के लिए CSS का उपयोग करना
आज वेबसाइटें संरचना और शैली को अलग करके बनाई गई हैं। पृष्ठ की संरचना को HTML द्वारा नियंत्रित किया जाता है जबकि शैली कैस्केडिंग स्टाइल शीट्स द्वारा निर्धारित की जाती है। रिक्ति बनाने या एक निश्चित लेआउट प्राप्त करने के लिए, HTML कोड में रिक्ति वर्ण जोड़ने के बजाय CSS की ओर मुड़ें।
यदि आप उपयोग करने का प्रयास कर रहे हैं टैब टेक्स्ट के कॉलम बनाने के लिए, इसके बजाय उपयोग करें
यदि आप जो डेटा डाल रहे हैं वह सारणीबद्ध डेटा है, तो उस डेटा को अपनी इच्छानुसार संरेखित करने के लिए तालिकाओं का उपयोग करें। वेब डिज़ाइन में टेबल्स को अक्सर खराब रैप मिलता है क्योंकि इतने सालों तक शुद्ध लेआउट टूल के रूप में उनका दुरुपयोग किया गया था, लेकिन टेबल अभी भी पूरी तरह से मान्य हैं यदि आपकी सामग्री में वास्तव में सारणीबद्ध डेटा है।
मार्जिन, पैडिंग और टेक्स्ट इंडेंट
CSS के साथ रिक्ति बनाने का सबसे सामान्य तरीका निम्नलिखित CSS शैलियों में से किसी एक का उपयोग करना है:
- हाशिया
- गद्दी
- पाठ इंडेंट
उदाहरण के लिए, निम्नलिखित सीएसएस के साथ एक टैब की तरह पैराग्राफ की पहली पंक्ति को इंडेंट करें (ध्यान दें कि यह मानता है कि आपके पैराग्राफ में "पहले" की एक वर्ग विशेषता संलग्न है):
प.प्रथम {
टेक्स्ट इंडेंट: 5em;
}
यह अनुच्छेद लगभग पाँच वर्णों का संकेत देता है।
मार्जिन या पैडिंग गुणों का उपयोग करें सीएसएस किसी तत्व के ऊपर, नीचे, बाएँ, या दाएँ (या उन पक्षों के संयोजन) में रिक्ति जोड़ने के लिए। CSS की ओर मुड़कर किसी भी प्रकार की आवश्यक रिक्ति प्राप्त करें।
CSS के बिना टेक्स्ट को एक से अधिक स्थान पर ले जाना
यदि आप चाहते हैं कि आपके टेक्स्ट को पिछले आइटम से एक से अधिक स्थान दूर ले जाया जाए, तो नॉन-ब्रेकिंग स्पेस का उपयोग करें।
गैर-ब्रेकिंग स्थान का उपयोग करने के लिए, आप जोड़ते हैं जितनी बार आपको अपने HTML मार्कअप में इसकी आवश्यकता होगी।
HTML इन गैर-ब्रेकिंग रिक्त स्थान का सम्मान करता है और उन्हें एक ही स्थान पर संक्षिप्त नहीं करेगा। हालांकि, इस दृष्टिकोण को एक खराब अभ्यास माना जाता है क्योंकि यह केवल लेआउट आवश्यकताओं को प्राप्त करने के लिए दस्तावेज़ में अतिरिक्त HTML मार्कअप जोड़ रहा है। जब व्यावहारिक हो, केवल वांछित लेआउट प्रभाव प्राप्त करने और उपयोग करने के लिए गैर-ब्रेकिंग रिक्त स्थान जोड़ने से बचें सीएसएस मार्जिन और पैडिंग बजाय।