इनलाइन तत्वों के बीच रहस्यमय इंडेंटेशन

हर कोई, यहां तक ​​कि सबसे "युवा" टाइपसेटर तत्वों, रिक्त स्थान के बीच अंतराल के साथ मुसीबतों (समस्याओं) को जानता है, जो शब्दों के बीच डाले जाते हैं। ये रिक्त स्थान अक्सर एक ब्लॉक के लेआउट में हस्तक्षेप करते हैं। इनसे छुटकारा पाना इतना आसान नहीं है, लेकिन अक्सर ये अंतर-शब्द दूरियां भी हमें पसंद आती हैं, इस समस्या को हल करने का एक तरीका है।

इस लेख में हम यह समझने की कोशिश करेंगे कि ये रहस्यमय "संकेत" क्या हैं, वे किस तरह के जानवर हैं और वे क्या खाते हैं। हम इस बात पर भी विचार करते हैं कि इनलाइन-ब्लॉक क्या है , और यह इन असंगत अंतरालों को अपने पीछे क्यों रखता है। खैर, और, सबसे महत्वपूर्ण बात, हम इस मुद्दे के कई सार्वभौमिक समाधान देखेंगे और निश्चित रूप से, हम उनके सभी पक्षों पर चर्चा करेंगे।


शुरुआत करने के लिए, मैं बताना चाहता हूं कि इनलाइन-ब्लॉक क्या है और हम इसके साथ सभी समाधानों पर चर्चा क्यों करेंगे।

इनलाइन-ब्लॉक

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

इनलाइन-ब्लॉक लाइन व्यवहार इसे अन्य निचले-मामले तत्वों के समान लाइन पर बने रहने की अनुमति देता है, उदाहरण के लिए, व्यर्थ में सामान्य अक्षरों के साथ < span> -th या मर्ज। एक पंक्ति में पाठ की तरह व्यवहार करें। खैर, और इसकी ब्लॉक क्षमताओं के लिए धन्यवाद, इनलाइन-ब्लॉक, आप सुरक्षित रूप से ब्लॉक तत्वों में निहित किसी भी गुण को सेट कर सकते हैं ... चौड़ाई, ऊंचाई, ऊपरी और निचले मार्जिन , उदाहरण के लिए, पहले से ही ब्लॉक की तरह काम करेंगे।
अच्छी तरह से, आदि, सामान्य रूप से, "ब्लॉक-स्ट्रिंग" का एक प्रकार



जीवित उदाहरण

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



ब्लॉक को आधार रेखा पर संरेखित किया गया है। जिसकी उम्मीद की जानी है।
तुरंत मैं आपको कुछ अलग उदाहरण दूंगा, अलग - अलग ऊर्ध्वाधर संरेखण के साथ इनलाइन-ब्लॉक का व्यवहार।

विविध संरेखण

यहां मैंने तीन अलग-अलग संरेखण का प्रदर्शन किया, लेकिन वास्तव में बहुत अधिक हैं, अगर यह दिलचस्प है, तो यहां सभी संभावित विकल्पों का वर्णन किया गया है। यह लेख उन सभी का वर्णन करने के लिए कोई मतलब नहीं है। इनलाइन-ब्लॉक के साथ काम करते समय बस इसे ध्यान में रखें।

इनलाइन-ब्लॉक - एक पत्र की तरह

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

लेख में मैं इनलाइन-ब्लॉक का उपयोग क्यों करता हूं?

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

रहस्यमय इंडेंटेशन

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

<ul> <li> 1</li> <li> 2</li> <li> 3</li> <li> 4</li> <li> 5</li> </ul> 

 ul { font: 14px Verdana,sans-serif; } ul li { display : inline-block ; width : 100px; border : 1px solid #E76D13; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

चित्र स्पष्ट रूप से मेनू आइटम के बीच अंतराल को दर्शाता है। वे कहाँ से आते हैं? कारण इस तथ्य में निहित है कि, जैसा कि हम पहले ही पता लगा चुके हैं, इनलाइन-ब्लॉक एक नियमित पत्र की तरह व्यवहार करता है, जिसका अर्थ है कि इसमें शब्दों के बीच रिक्त स्थान है जैसे कि सादे पाठ। इन अंतरालों को विभिन्न वेब इंस्पेक्टरों में स्पष्ट रूप से देखा जा सकता है, उदाहरण के लिए, जैसे कि "IE WebDeveloper" Internet Explorer के लिए।
नतीजतन, हम बहुत "परेशानी" देखते हैं, जिसके कारण हम सभी यहां एकत्र हुए।



जैसा कि हम देख सकते हैं, ब्राउज़र एक खाली टेक्स्ट नोड बनाता है, जो वास्तव में, एक पंक्ति फ़ीड, स्थान या, उदाहरण के लिए, एक टैब हो सकता है। ये सभी सूचीबद्ध चीजें एक ही स्थान में बदल जाती हैं और निम्नलिखित इकाई द्वारा वर्णित की जाती हैं: & # x0020; । यह भी ध्यान में रखा जाना चाहिए कि, चूंकि एक अंतरिक्ष एक साधारण चरित्र है, यह वही चरित्र आकार या फ़ॉन्ट परिवार के आधार पर तदनुसार बदल जाएगा, अर्थात, वास्तव में, एक स्ट्रिंग में एक नियमित अक्षर के समान व्यवहार करता है। लेआउट के समय यह सब ध्यान में रखा जाना चाहिए।

हमारी चुनौती

हम किसी तरह इस घृणा से छुटकारा पाने के कार्य से सामना कर रहे हैं। निकालें, इसे शून्य चौड़ाई बनाएं, समतल करें, छिपाएं, कुछ भी ... सामान्य रूप से, कुछ ऐसा तरीका लेकर आएं जो हमें इस शब्द अंतर से बचाएगा और हमारे बिंदुओं को बारीकी से जोड़ देगा।

काम के लिए सामग्री

आइए हम इस समस्या को हल करने में हमारी मदद कर सकते हैं।

• 1. मार्जिन-लेफ्ट (नकारात्मक) - एक ऐसी संपत्ति जिसके साथ आप आइटम को बाईं ओर स्थानांतरित कर सकते हैं, जैसे कि एक-दूसरे को, उनके बीच नफरत की जगह से "छुटकारा", इसलिए बोलने के लिए।
• 2. फ़ॉन्ट-आकार - एक गुण जो फ़ॉन्ट आकार सेट करता है जिसके साथ हमारा स्थान (वर्ण) फ़ॉन्ट आकार शून्य के बराबर सेट किया जा सकता है, और इस तरह इसे इतना छोटा बना देता है कि यह व्यर्थ नहीं दिखाई देगा।
• 3. अक्षर-रिक्ति - एक संपत्ति जो वर्णों के बीच अंतर को निर्धारित करती है। डिफ़ॉल्ट रूप से (सामान्य) फ़ॉन्ट के आकार और प्रकार के आधार पर सामान्य रिक्ति सेट करता है।
• 4. शब्द-रिक्ति - एक संपत्ति जो शब्दों के बीच रिक्ति निर्धारित करती है। डिफ़ॉल्ट रूप से, अक्षर-रिक्ति के समान, इसे फ़ॉन्ट के आकार और प्रकार के आधार पर सेट करता है।
• 5. तत्वों को एक दूसरे को दबाएं, अर्थात कसकर, टैग को टैग करें, और इस प्रकार शब्द रिक्ति निकालें।
• 6. तत्वों के बीच टिप्पणियां डालें, और इस तरह उनके बीच की नाराजगी को दूर करें।
• 7. सबसे ज्यादा, मेरी राय में, सभी का एक दिलचस्प समाधान ... मैं इसे शायद नाश्ते के लिए छोड़ दूं ... साज़िश ...

साथ ही, हम एक परीक्षण तत्व बनायेंगे <div> Width = 510px </ div> , जो हमारा सहायक शासक होगा। हमारे आइटमों की कुल चौड़ाई 510px है । ये साइड बॉर्डर्स हैं + उनकी चौड़ाई + अंकों की संख्या खुद (1 + 100 + 1) * 5) = 510 ।
ऐसा लगता है कि वे कुछ भी नहीं भूल गए हैं, इसलिए हम उपरोक्त सभी विकल्पों पर विचार करते हैं।

विकल्प 1 - मार्जिन-लेफ्ट

हमारी लाइन में सबसे पहला लेफ्ट नेगेटिव मार्जिन है। आइए देखें कि वह हमारी मदद कैसे कर सकता है।
स्पष्टता के लिए सीएसएस कोड:

 ul { font: 14px Verdana,sans-serif; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; margin-left: -.36em; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; /* margin-left   IE6-7 */ //margin-left: 0; } 

यह कोड से देखा जा सकता है कि सामान्य सूची के लिए मैंने Verdana फ़ॉन्ट और फ़ॉन्ट आकार 14px पर सेट किया है (हमारे उदाहरणों में यह इन मूल्यों पर आधारित होगा)। अच्छी तरह से, निश्चित रूप से, वाम नकारात्मक मार्जिन -३.६ एम के बराबर है। जैसा कि आपने देखा होगा, हमारे उद्देश्य के लिए मैंने लंबाई (ईएम) की स्केलेबल यूनिट को चुना, क्योंकि, जैसा कि हम पहले से ही जानते हैं, हमारा स्पेस फ़ॉन्ट के आकार पर नृत्य करता है, जिसका अर्थ है कि यह इसके आधार पर स्केल कर सकता है। लंबे समय तक मूल्यों के साथ छेड़छाड़ करने के बाद, मैंने निर्धारित किया कि -.36em ) हमारे फ़ॉन्ट के लिए सबसे उपयुक्त है (दूसरे के लिए, अन्य मूल्यों का चयन करना आवश्यक होगा), इसलिए इस पैमाने को छोड़ दें, शायद। आइए देखें परिणाम:



जैसा कि हम स्क्रीनशॉट से देख सकते हैं, हमारे पॉइंट्स ने लेफ्ट बॉर्डर को छोड़ दिया, जो कि, सिद्धांत रूप में, स्पष्ट है, क्योंकि वास्तव में हमने सभी पॉइंट्स को लेफ्ट में स्थानांतरित कर दिया है, जिसका मतलब है कि पहला पॉइंट भी लेफ्ट ही है। इस "गलतफहमी" को हल करने के लिए, हम निम्नलिखित रिकॉर्ड उल ली को जोड़कर पहले मेनू आइटम पर बिल्कुल मार्जिन-शेष शून्य कर सकते हैं : पहले-बच्चे {मार्जिन-बाएं: 0;} हमारे कोड में।
* यह ध्यान देने योग्य है कि IE6-7 के लिए हम मार्जिन-लेफ्ट को पूरी तरह से रीसेट कर देते हैं, लेकिन क्यों ... हम थोड़ी देर बाद पता लगाएंगे।
और बीच में, हम परिणाम को देखते हैं:



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

 ul { font: 28px Verdana,sans-serif; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; margin-left: -.36em; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; /* margin-left   IE6-7 */ //margin-left: 0; } ul li:first-child { margin-left: 0;}. 

जैसा कि आप देख सकते हैं, हमने अपना लक्ष्य हासिल कर लिया, लेकिन जब तक हमने फ़ॉन्ट नहीं बदल दिया, उदाहरण के लिए, एरियल (बाईं ओर फिटिंग के बाद, इसके नीचे नकारात्मक मार्जिन )





हमारी सूची में पृष्ठभूमि सेट करके, हम देख सकते हैं कि अब परिणाम क्रोम, ओपेरा 11.53, IE6-8 और फ़ायरफ़ॉक्स 8, IE 9 में थोड़ा भिन्न हैं। पूर्व में, सब कुछ अपनी जगह पर बना रहा, लेकिन उत्तरार्द्ध में, आप दाईं ओर थोड़ा सा इंडेंटेशन नोटिस कर सकते हैं, जो बताता है कि मूल रूप से इच्छित की तुलना में अभी भी कुछ अलग तस्वीर प्राप्त करने का जोखिम है। एक विकल्प के रूप में, ज़ाहिर है, आप विशेष फिट कर सकते हैं। फ़ायरफ़ॉक्स 8 और IE 9 के लिए मान अलग-अलग हैं, लेकिन, फिर से, यह एक बहुत अच्छा समाधान नहीं है, क्योंकि सबसे पहले, यह अनिवार्य रूप से एक बैसाखी है, और दूसरी बात, यह पूरी बहुमुखी प्रतिभा नहीं देता है, क्योंकि आप कभी नहीं जानते कि किस आकार में कैसे, अन्य ब्राउज़र व्यवहार करेंगे।

सामान्य तौर पर, मैंने व्यक्तिगत रूप से निष्कर्ष निकाला है कि यह काफी सामान्य और व्यवहार्य विकल्प है, एक निश्चित स्थिति में आप आकार को समायोजित कर सकते हैं और सब कुछ ठीक हो जाएगा। निश्चित रूप से, बहुत सारे मिन्यूज़ भी हैं, विभिन्न ब्राउज़रों के लिए पहले पैराग्राफ + फिटिंग वैल्यू के मार्जिन-लेफ्ट को शून्य करने के रूप में, अच्छी तरह से ... निश्चित रूप से जोखिम का एक हिस्सा है, जिसके कारण हो सकते हैं, हालांकि बड़ा नहीं है, लेकिन कुछ अंतर इंडेंटेशन, विभिन्न फोंट और उनके आकारों के साथ।

मार्जिन-लेफ्ट के साथ रिजल्ट

विकल्प 2 - फ़ॉन्ट-आकार

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

 ul { font: 14px Verdana, Geneva, sans-serif; /*      */ font-size: 0; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

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

 ul { font: 14px Verdana, Geneva, sans-serif; /*      */ font-size: 0; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*       */ font-size: 14px; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

बहुत बढ़िया! अब सब कुछ काम करता है! लेकिन क्या यह हर जगह है? जाँच हो रही है ... उफ़ ... दुर्भाग्य से लगभग ...





जैसा कि आप स्क्रीनशॉट से देख सकते हैं, सफारी ने हमें नीचे जाने दिया, पूरी तरह से हमारे इंटरड प्रतीक को बंद करने से इनकार कर दिया :( ऐसा नहीं हुआ; इस सवाल का जवाब नहीं मिला, मैंने यह मान लिया कि यह असली सफारी बग और कुछ भी नहीं है।) इसलिए, हमें या तो इस बग का इलाज ढूंढना होगा, या इस पद्धति को पूरी तरह से मना कर देना चाहिए, मैं वास्तव में इस पद्धति को सूची से हटाना नहीं चाहता, क्योंकि, सबसे पहले, यह विकल्प केवल सफारी में काम नहीं करता है, और दूसरी बात, मेरे अंतर्ज्ञान ने मुझे बताया कि अभी भी एक समाधान था। एक स्पष्ट ब्याज उठाया और निर्णय सभी एक ही एक हाँ, और क्या यह पता चला मेरे लिए संपत्ति प्रदर्शन में निहित का जवाब एक सुखद आश्चर्य होना करने के लिए किया गया था:। तालिका, जो आइटम के साथ कंटेनर पर लटका दिया (इस मामले यूएल में) सत्यापित करने के लिए ..

 ul { font: 14px Verdana, Geneva, sans-serif; /*      */ font-size: 0; /*    Safari */ display: table; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*       */ font-size: 14px; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

और यहाँ सफारी से एक स्क्रीनशॉट है:



सुपर! यह काम किया! लेकिन यह कैसे है? शायद, डिस्प्ले के साथ: टेबल, इंजन ब्लॉक के स्ट्रिंग को " टेबल-सेल की तरह कुछ " के रूप में मानता है, अर्थात। टेबल सेल, कुछ एफएफ से 3.6 में, अगर मैं कुछ भी भ्रमित नहीं करता हूं, तो एक समान बग था ।

इससे हमें कैसे खतरा हो सकता है?

कुछ छोटी-मोटी खामियां हैं जिनसे अवगत होना चाहिए।
1. फ़ायरफ़ॉक्स को छोड़कर सभी ब्राउज़रों में, तैनात तत्वों के लिए शुरुआती बिंदु रिश्तेदार के साथ निकटतम पूर्वज है, अर्थात यह एक ही सेल ( टीडी ) हो सकता है। लेकिन यहां हमारे पास टीडी नहीं है, लेकिन एलआई है , इसलिए हमें निश्चित रूप से इस संबंध में समस्याएं नहीं होंगी। लेकिन समस्याएं होंगी अगर हम खुद को एलआई के अंदर, उल के अंदर, और चूंकि हमारे पास है, तो अनिवार्य रूप से एक टेबल है, तो फ़ायरफ़ॉक्स इसके सापेक्ष आइटम को लेने से इंकार कर देगा। लेकिन चिंता करने की आवश्यकता नहीं है, क्योंकि इस मामले में हम उल तत्व के लिए सामान्य आवरण (उदाहरण के लिए, div ) के साथ बचाव में आएंगे।
* वैसे, कुछ सालों के बाद भी मुझे इस समस्या का हल मिल गया ।
2. दूसरी बारीकियों की चौड़ाई है। प्रदर्शन: तालिका डिफ़ॉल्ट रूप से उपलब्ध स्थान तक नहीं फैलती है, इसलिए आपको कंटेनर की चौड़ाई निर्धारित करने की आवश्यकता हो सकती है (और बॉर्डरबोर्ड / पैडिंग्स की उपस्थिति में, बॉक्स-आकार: बॉर्डर-बॉक्स इसके अलावा आवश्यक उपसर्गों के साथ)।
यह वही है जो चिंताओं को प्रदर्शित करता है: तालिका ही, लेकिन फ़ॉन्ट-आकार के बारे में क्या? क्या उसके पास कोई विपक्ष है? हां, शायद एक अप्रिय खामी है। माता-पिता के फ़ॉन्ट-आकार के मूल्य शून्य होने के कारण, हम बच्चों के लिए स्केलेबल इकाइयों की लंबाई लागू नहीं कर सकते हैं वे विरासत में प्राप्त फ़ॉन्ट आकार पर आधारित हैं और तदनुसार, हमारे मामले में शून्य से। अच्छी तरह से, सब कुछ के लिए, यह वही है जो आपको हमेशा तलाश में रहने की जरूरत है, ताकि पोस्टरिटी को फ़ॉन्ट आकार फिर से सौंपा जाए।
खैर, एक पूरी के रूप में, बारीकियों को छोड़कर, विधि काफी काम कर रही है। इसलिए हम कार्रवाई में एक उदाहरण देखते हैं और आगे बढ़ते हैं।

फ़ॉन्ट आकार समाधान

विकल्प 3 - पत्र-रिक्ति

हमारे पास तीसरा नंबर अक्षर-रिक्ति है। इससे पहले, हमें पता चला कि यह संपत्ति वर्णों के बीच अंतर को प्रभावित करती है, और चूंकि हमारा इनलाइन-ब्लॉक अनिवार्य रूप से एक बड़ा चरित्र है, इसलिए पत्र-रिक्ति को अभी भी हमारी समस्या को हल करने में मदद करनी चाहिए। पिछली बार की तरह, मैंने पैमाने के साथ छेड़छाड़ की और पाया कि -.36em को वैरडाना की जरूरत होगी।
* हां, और यह ध्यान देने योग्य है कि पत्र-रिक्ति, फ़ॉन्ट-आकार की तरह, एक विरासत में मिली संपत्ति है, इसलिए हमें दूसरे संस्करण की तरह ही वंशजों को शून्य करने के साथ एक ही ऑपरेशन करना होगा।

 ul { font: 14px Verdana, Geneva, sans-serif; /*    -.36em */ letter-spacing : -.36em; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*       */ letter-spacing: normal; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

ठीक है, अंक खुद को हमारी जरूरत के रूप में गोदी लग रहे थे। "ऐसा लगता है" - मैंने संयोग से नहीं कहा, लेकिन क्यों, आप निम्न स्क्रीनशॉट से समझेंगे।





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

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

 ul { font: 14px Verdana, Geneva, sans-serif; /*    -.36em */ letter-spacing : -.36em; font-size : 0; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*       */ letter-spacing: normal; font-size : 14px; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

हां, अब सब कुछ ठीक है, फ़ॉन्ट-आकार वास्तव में हमारी मदद कर सकता है। इससे, मैंने निष्कर्ष निकाला कि, वास्तव में, आप दोनों विकल्पों का समान रूप से उपयोग कर सकते हैं: फ़ॉन्ट-आकार + प्रदर्शन-तालिका या पत्र-रिक्ति + फ़ॉन्ट-आकार । यानी पहले और दूसरे दोनों मामलों में, हमें अतिरिक्त गुणों के रूप में सहायक उपकरण की आवश्यकता होती है।

अद्यतन: वैसे, एक लेख लिखते समय, मैंने सफारी में एक अजीब बग की खोज की। जब आप अभिभावक को फॉन्ट-साइज़: 0 और लेटर-स्पेसिंग को किसी भी एम वैल्यू के एक समूह में उजागर करते हैं, उदाहरण के लिए लेटर-स्पेसिंग: -.36em, तब सब कुछ तुरंत सफारी में गिर जाता है (और। मैं सफारी के इस अजीब व्यवहार के कारण की पहचान नहीं कर पाया। मुझे टिप्पणियों में इस सवाल का जवाब सुनकर खुशी हुई। मेरी ओर से समाधान पत्र-रिक्ति मूल्यों को निर्धारित करना है, उदाहरण के लिए, पिक्सेल में।

पत्र-रिक्ति के साथ परिणाम

विकल्प 4 - शब्द-रिक्ति

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

 ul { font: 14px Verdana, Geneva, sans-serif; /*    -.36em */ word-spacing: -.36em; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*       */ word-spacing: normal; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

कोड से, सब कुछ स्पष्ट प्रतीत होता है, स्क्रीनशॉट पर जाएं:





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

पहला सवाल जो आप पूछेंगे: "क्या इस समस्या का कोई हल है?" मैं ख़ुशी से आपको जवाब दूंगा कि हाँ! और, विचित्र रूप से, यह समाधान फिर से हमारा पुराना, अच्छा प्रदर्शन है: तालिका, जिसने हमें सफारी में समस्याओं के साथ फ़ॉन्ट-आकार के साथ दूसरे संस्करण में मदद की। तो इस नियम को जोड़ने और परिणाम देखने के लिए स्वतंत्र महसूस करें।

 ul { font: 14px Verdana, Geneva, sans-serif; /*    -.36em */ word-spacing: -.36em; /*   webkit */ display: table; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*       */ word-spacing: normal; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

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

शब्द-रिक्ति के साथ परिणाम

विकल्प 5, 6 - तत्वों का कनेक्शन

मैंने इन दो समाधानों को एक में संयोजित करने का निर्णय लिया, क्योंकि वे सार में समान हैं और लगभग एक ही काम करते हैं, अर्थात्। गोदी तत्व, उनके बीच रिक्त स्थान को हटाते हुए।

HTML पहला विकल्प :

 <ul><li> 1</li><li> 2</li><li> 3</li><li> 4</li><li> 5</li></ul> 

खैर, दूसरा, क्रमशः:

 <ul><!-- --><li> 1</li><!-- --><li> 2</li><!-- --><li> 3</li><!-- --><li> 4</li><!-- --><li> 5</li><!-- --></ul> 

और दोनों विकल्पों के लिए सीएसएस होगा:

 ul { font: 14px Verdana, Geneva, sans-serif; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

और हां, स्क्रीनशॉट:



जैसा कि आप कोड से देख सकते हैं, पहले संस्करण में हमने केवल उद्घाटन के करीब आने वाले टैगों को बंद करके तत्वों को डॉक किया। और दूसरे में, तत्वों की सीमाओं के बीच टिप्पणियां रखी गईं, उन्हें हमारे रिक्त स्थान के साथ बदल दिया गया। यानी वास्तव में, हमने जानबूझकर उन दोनों के बीच किसी भी इंडेंटेशन के तत्वों से वंचित किया, उन्हें जानबूझकर विभिन्न तरीकों से संयोजित किया। उसी समय, जैसा कि आप प्रतिस्थापित कर सकते हैं, इन विकल्पों में एक अच्छा प्लस है, उन्हें किसी विशेष की आवश्यकता नहीं है। CSS में गुण और बैसाखी, वे IE6 + से शुरू होकर, सभी ब्राउज़रों में और खुद के द्वारा काम करते हैं।

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

सामान्य तौर पर, हम यह निष्कर्ष निकाल सकते हैं कि इन विकल्पों में निश्चित रूप से जीवन का अधिकार है, लेकिन आप उनका उपयोग केवल तब कर सकते हैं जब आप जानते हैं और आप जो कर रहे हैं, उसके बारे में निश्चित हैं।
इसलिए जब हम एक कामकाजी उदाहरण देखते हैं और मेरी राय में, सबसे व्यावहारिक और दिलचस्प तरीके से सुचारू रूप से अंतिम विधि पर जाते हैं

परिणाम

विकल्प 7

जैसा कि यह निकला, दुनिया में एक और भी सरल और सबसे महत्वपूर्ण, बिल्कुल कानूनी समाधान है जिसे मैं साझा करना चाहता हूं। तथ्य यह है कि किसी भी HTML विनिर्देश (लेकिन एक्सएचटीएमएल नहीं) हमें कुछ तत्वों से समापन टैग को छोड़ देने की अनुमति देता है, अर्थात। उनकी अनुपस्थिति की अनुमति देता है। एचटीएमएल 5 विनिर्देश में ऐसे 18 तत्व हैं। इसका मतलब है कि हम, पूरी तरह से कानूनी आधार पर, इसका लाभ उठा सकते हैं। आखिरकार, कोई भी हमें ऐसा करने के लिए मना नहीं करता है, है न? '
हमारे मामले में, < li> तत्व इस सूची में आते हैं, इसलिए हम इसका उपयोग करेंगे।

 <ul> <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 </ul> 

 ul { font: 14px Verdana, Geneva, sans-serif; } ul li { display : inline-block; width : 100px; border : 1px solid #E76D13; /*  inline-block  IE6-7*/ //display : inline; //zoom : 1; } 

यानीवास्तव में, मैंने बस बंद करना बंद कर दिया < / li> टैग , और चूंकि पहले तत्व की सामग्री में तुरंत दूसरे का उद्घाटन टैग है, फिर उनके बीच कोई अंतराल नहीं होना चाहिए। स्क्रीनशॉट में स्पष्ट रूप से दिखाया गया है।

* यह ध्यान देने योग्य है कि IE6-7 में, उदाहरण के लिए, सूचियों में वैकल्पिक समापन टैग को अभी भी अनदेखा किया जाता है, इसलिए यह विधि स्वचालित रूप से वहां प्राप्त होती है। संक्षेप में इस वजह से, एक नकारात्मक बाएं मार्जिन के साथ पहले संस्करण में , हम अलग-अलग इन ब्राउज़रों के लिए मार्जिन-बाएं रीसेट करते हैं।
यह विधि मुझे सबसे सफल लगती है, एक ही समय में इस आलेख में हमारे द्वारा विचार किए गए अन्य सभी की तुलना में आसान और सुविधाजनक। एकमात्र दोष यह है कि कोई भी XML पार्सर ऐसी संरचना को स्वीकार नहीं करता है।

निष्कर्ष यह है कि यह विधि "वैधता के लिए वैधता के कट्टरपंथियों" के लिए उपयुक्त नहीं है, जो एक्सएचटीएमएल-सिद्धांत का चयन करते हैं, लेकिन ऐसे चिकित्सक जो आधुनिक विनिर्देशों और वास्तविक परिणाम पर ध्यान केंद्रित करते हैं, इस तरह के समाधान से इनकार करने की कोई आवश्यकता नहीं है =)

परिणाम

सारांश:

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

सभी विकल्प एक साथ:

1. रिजल्ट मार्जिन-लेफ्ट (लगभग वर्किंग सॉल्यूशन) के साथ
2. फॉन्ट-साइज (वर्किंग सॉल्यूशन) के साथ सॉल्यूशन
3. लेटर-स्पेसिंग (वर्किंग सॉल्यूशन) के साथ रिजल्ट
4. वर्ड-स्पेसिंग (वर्किंग सॉल्यूशन) के साथ रिजल्ट
5. जानबूझकर के साथ वेरिएंट दबाए गए तत्व (कार्य समाधान)
6. खुले टैग (कार्य समाधान) के साथ समाधान

और, मैं सामग्री को खोजने और लेख लिखने में मेरी मदद करने के लिए अपने दोस्त सेलेनिट 2 को एक विशेष धन्यवाद कहना चाहूंगा ।

अपडेट: मैंने इस लेख को अपने ब्लॉग पर पोस्ट किया है ।