गटर - पृष्ठभूमि या सीमा के साथ कॉलम के लिए पैडिंग और मार्जिन


9

जब एक स्तंभ (या बॉक्स, या किसी लेआउट मॉड्यूल) में गटर के लिए अनुशंसित डिज़ाइन दिशानिर्देश हैं, तो इसका आकार स्पष्ट रूप से दिखाई देता है क्योंकि इसकी अपनी पृष्ठभूमि या सीमा है?

आमतौर पर कोई भी बॉक्स के किनारे और उसके पाठ के बीच में कुछ जगह रख सकता है। लेकिन इस जगह को कहां से मिलाएं? बॉक्स का विस्तार करके , या पाठ को सिकोड़कर ?

समझाने के लिए, यहां कुछ (लेकिन सभी नहीं) विकल्प दिए गए हैं ...

यहाँ छवि विवरण दर्ज करें

(इसके अलावा, मैं किसी भी संख्या में कॉलम के साथ किसी भी ग्रिड का उपयोग कर सकता था, और कोई भी चौड़ाई - यह केवल एक उदाहरण के रूप में कार्य करता है - वास्तविक प्रश्न हर बार एक लेआउट स्ट्रैडल गटर से पूछा जा सकता है।)

मैं ग्रिड आधारित लेआउट पर लेखन के ढेर से गुज़रा हूँ, लेकिन अभी तक मैंने बस एक बात देखी है जो इस बात को संबोधित करती है: खोइ विन्ह द्वारा अपने तत्वों को ठगना।

मैं क्या खो रहा हूँ? या वहाँ कोई स्पष्ट दिशानिर्देश है?

चूंकि ग्रिड आधारित लेआउट के लिए प्रेरणाओं में से एक वैश्विक संरेखण की भावना को बढ़ाना है, मुझे लगता है कि कोई तर्क दे सकता है कि निर्णय अधिक संरेखण की मांग पर निर्भर करता है; बॉक्स, या इसकी सामग्री?

जब तक मैं गलत नहीं हूँ, खोई विन्ह अपने लेख में विकल्प 3 के लिए तर्क देता है।

मुझे लगता है कि विकल्प 3 और विकल्प 6 के बीच में खुद को आगे पीछे किया जाएगा। विकल्प 3 के साथ बॉक्स को संरेखित किया गया है, लेकिन इसका पाठ तंग महसूस करता है। लेकिन विकल्प 6 का उपयोग करते हुए, कोई भी न तो बॉक्स के साथ समाप्त होता है और न ही पाठ संरेखित होता है (हालांकि कोई कह सकता है कि टेक्स्ट-एज और बॉक्स-बॉर्डर के बीच निहित मध्य अब 'गठबंधन' है)।

वेब से परे कदम, किताब डिजाइन पर मेरे पढ़ने और पेज निर्माण के कैनन में से कोई भी इस मुद्दे के बारे में बात नहीं करता है। मैं देख सकता हूं कि कैन्सन 'बैकग्राउंड ऑन क्लियर बैकग्राउंड' ब्लैक प्रिंटिंग के विशाल बहुमत के लिए कैसे काम करते हैं, लेकिन मिनट एक पेज लेआउट में रंग जोड़ता है (या एक ब्लैक-एंड-वाइट स्कीम का विरोध करता है), गटर प्रश्न वापस आता है।

मम्म, मुझे लगता है कि सवाल है; क्या मेरे द्वारा बताए गए विकल्पों में से चुनने के लिए कोई दिशा-निर्देश हैं - या क्या मैंने डिजाइनर कानून से परे कदम उठाया है और क्या यह सिर्फ 'जो दिखता है और अच्छा लगता है' के बारे में है ?


2
मेरे पास यहां दूसरों की राय के साथ कोई व्यक्तिगत गोमांस नहीं है, जिसके बारे में सबसे अच्छा लग रहा है (वास्तव में, मैं शायद # 3 पर सहमत हूं), लेकिन कैनन, दिशानिर्देश, और नियम अंततः प्राधिकरण की मनमानी अपील से ज्यादा कुछ नहीं हैं। वे महान उपकरण हैं, लेकिन अंतिम सत्य (tm) की तलाश में मत जाओ
21:

लोरम हिप्स्टम, है ना?
e31

जवाबों:


5

जब भी आप एक ग्रिड का उपयोग करते हैं, तो आपको इसे लगातार उपयोग करना चाहिए, जहां आपके पास एक तत्व है (आमतौर पर किसी दिए गए पृष्ठ पर एक से अधिक नहीं) एक अच्छे कारण के लिए इसका उल्लंघन करते हैं - इसे बाहर खड़ा करने या पृष्ठ का मूड बदलने के लिए । इस काम को करने के लिए कंट्रास्ट को बोल्ड और स्पष्ट रूप से जानबूझकर होना चाहिए। ("काम" से मेरा मतलब है कि यह गलती की तरह नहीं दिखता है।)

एक ग्रिड, जिसका सख्ती से पालन किया जाता है, शांति पर है। कोई तनाव हो तो बहुत कम; चीजें दिखाती हैं कि आंख उन्हें कहाँ होने की उम्मीद करती है, और पाठक कभी भी चौंका नहीं या असहज महसूस नहीं करेगा।

इस स्थिति में, यदि आपकी पृष्ठभूमि ग्रिड से थोड़ी सी भी उल्लंघन करती है, तो # 4 में, यह एक गलती की तरह दिखता है। वो अजीब हैं। नाली की पूरी कमी अन्य कॉलम के खिलाफ बॉक्स को भीड़ देती है। पाठ के खुले अग्रणी के खिलाफ, जो खुलेपन की अपेक्षा करता है, यह स्पष्ट रूप से गलत है।

0 कोई कंट्रास्ट प्रदान नहीं करता है, ताकि दूसरा कॉलम बाकी हिस्सों से अलग न हो। कुछ परिस्थितियों में आप जो चाहते हैं।

# 5 और # 6 में "आधा गटर" उदाहरण गटर को फिर से परिभाषित करता है, जिससे यह संकरा हो जाता है। वे वास्तव में पूरी ग्रिड को क्षैतिज और लंबवत रूप से पुनर्परिभाषित करते हैं , क्योंकि इस मामले में गटर बिल्कुल उसी तरह से समाप्त होता है जैसे लाइन की जगह। यह अपने आप में पाठ के लिए बुरा है, लेकिन बॉक्स के साथ काम कर सकता है। # 6 में, हालांकि, आपके पास ऊपर और नीचे की तुलना में पाठ के दोनों ओर सफेद स्थान है। यह अजीब और असुविधाजनक है क्योंकि इसका कोई मतलब नहीं है। # 5 बेहतर होगा, क्योंकि सफेद स्थान अधिक समान रूप से वितरित किया जाता है। उसी कारण से, # 3 # 2 के लिए बेहतर है।

कुल मिलाकर, तब, मैं लॉरेन से सहमत होगा और आपके सर्वश्रेष्ठ शॉट के रूप में # 3 की सिफारिश करूंगा। स्तंभों की संख्या की परवाह किए बिना यह सबसे अच्छा सामान्य मामला भी है।

नियम हैं। यदि आपके पास एक अच्छा कारण है तो वे निश्चित रूप से टूट सकते हैं, लेकिन किसी भी समय ऐसा करने से आपको उद्देश्यपूर्ण, साहसिक और स्पष्ट रूप से "जैसा डिज़ाइन किया गया है" होना चाहिए। जॉर्जिया के साथ हेलवेटिका ब्लैक की जोड़ी काम करती है क्योंकि वे अलग हैं; ट्रेबुचेट को वर्दाना के साथ जोड़ा जाता है, जो तंत्रिकाओं पर फैलते हैं क्योंकि वे अलग-अलग नहीं होते हैं। एक बड़ा, चौकोर, लाल बॉक्स जो डेढ़ स्तंभों तक फैला हो, काम कर सकता है; एक ग्रे-ऑफ ग्रे नहीं होगा।


2

मैं विकल्प 3 के लिए मतदान करता हूं। ग्रे बॉक्स के किनारों को स्तंभ को लंबवत रूप से परिभाषित किया जाता है, इसलिए उन पंक्तियों का उल्लंघन नहीं किया जा सकता है (बिना किसी कारण के)। सभी तीन स्तंभों के लिए गटर समान होना चाहिए, इसलिए ग्रे बॉक्स के अंदर पाठ को इनसेट करें। विकल्प 2 का इनसेट थोड़ा बहुत गहरा है।

यही मैं प्रिंट में करने का आदी हूं, इसलिए यह वेब पर भी "सही" लगता है।


0

यदि यह वेब डिज़ाइन के लिए है, तो यदि आप क्रॉस-ब्राउज़र संगति के साथ संबंध रखते हैं, तो मैं क्षैतिज दिशा में किसी भी पैडिंग का उपयोग करने की सलाह दूंगा। अलग-अलग ब्राउज़र डिव और पेडिंग का अलग-अलग तरीके से इलाज करते हैं जिससे प्रस्तुति टूट सकती है।

आप जहां भी जाते हैं, केवल क्षैतिज रूप से मार्जिन का उपयोग करते हैं। इसके लिए आपको इच्छित लेआउट प्राप्त करने के लिए एक वर्ग या दो जोड़ने की आवश्यकता होती है (उदाहरण के लिए div के लिए मार्जिन का एक सेट और पैराग्राफ के लिए दूसरा), लेकिन लंबे समय में, यह अधिक भरोसेमंद है। ऊर्ध्वाधर गद्दी आमतौर पर एक समस्या नहीं है, हालांकि।


जो भी IE के वर्तमान संस्करण अभी भी है कि मार्जिन दोहरीकरण बात करते हैं? दया, यह कष्टप्रद है।
लॉरेन-क्लियर-मोनिका-इप्सम

1
आप ठीक सभी दिशाओं में पैडिंग / मार्जिन कर सकते हैं। आपको केवल अपने बॉक्स मॉडल (माता-पिता और बच्चे दोनों) पर ध्यान देने की आवश्यकता है।
डॉसन

आप गद्दी का उपयोग कर सकते हैं, लेकिन फिर आपको इसे कैस्केड के नीचे सभी तरह से खाते रहना होगा। यह बहुत आसान और विश्वसनीय है कि इस आइटम पर मार्जिन का उपयोग करें जो कि कैस्केड के नीचे है। यह लगातार प्रत्येक ब्राउज़र में काम करता है। व्यक्तिगत राय, बिल्कुल।
बजे बेनी अंदाजेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.