सीएसएस में मार्जिन / पैडिंग प्रतिशत हमेशा चौड़ाई के खिलाफ क्यों गिना जाता है?

Question

यदि आप CSS बॉक्स मॉडल युक्ति को देखते हैं , तो आप निम्नलिखित का अवलोकन करेंगे:

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

यह वास्तव में सच है। लेकिन क्यों ? पृथ्वी पर कोई भी इसे इस तरह डिजाइन करने के लिए मजबूर करेगा? ऐसे परिदृश्यों के बारे में सोचना आसान है जहाँ आप चाहते हैं, उदाहरण के लिए एक निश्चित चीज़ हमेशा पृष्ठ के शीर्ष से 25% नीचे होना चाहिए, लेकिन यह किसी भी कारण से आना मुश्किल है कि आप ऊर्ध्वाधर पैडिंग के लिए क्षैतिज आकार के सापेक्ष क्यों चाहते हैं माता पिता।

यहाँ मैं जिस घटना का उल्लेख कर रहा हूँ, उसका एक उदाहरण है:

<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
  This div is 200x800.
  <div style="border: 1px solid blue; margin: 10% 0 0 10%;">
    This div has top-margin of 10% and left-margin of 10% with respect to its parent.
  </div>
</div>

http://jsfiddle.net/8JDYD/

Comments

मेरा शुरुआती विचार यह है कि यह अस्पष्टता का कारण होगा कि margin: 25%वास्तव में इसका क्या मतलब है। यह एक समान मार्जिन नहीं होगा, भले ही कोड यह सुझाव दे। मेरे पास इसे वापस करने के लिए कोई सबूत नहीं है, लेकिन यह उचित लगता है।

— रायन काइल

मेरे विचार से jsFiddle । ऊँचाई चौड़ाई की तुलना में बहुत अधिक परिवर्तनशील है, इसलिए जब भी सामग्री परिवर्तित होती है, तो यह मार्जिन को कठिन-से-अनुमानित तरीकों से स्थानांतरित कर देता है।

— रिचर्ड्स

@ रयान: यह सच है, यह एक भी मार्जिन नहीं होगा, लेकिन फिर, अगर आप कहते height: 10%; width: 10%हैं कि आपको एक वर्ग तत्व नहीं मिलेगा, या तो।

— एमकेपी

Dev.w3.org/csswg/css3-box/#the-margin-properties के अनुसार, यह बताता है Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).कि यह दोनों तरीके से चलता है

— एडम स्वीनी

@ रयान मुझे लगता है कि हमारे पास एक विजेता है। एक डेमो के लिए यहाँ देखो - jsFiddle

— रिचर्ड्स

Answer 1

मेरी टिप्पणी को एक उत्तर में स्थानांतरित करना, क्योंकि यह तार्किक समझ में आता है। हालाँकि, कृपया ध्यान दें कि यह निराधार अनुमान है। इस तरह से युक्ति क्यों लिखी जाती है इसका वास्तविक तर्क अभी भी तकनीकी रूप से अज्ञात है।

तत्व ऊंचाई बच्चों की ऊंचाई से परिभाषित होती है। यदि किसी तत्व में पैडिंग-टॉप: 10% (माता-पिता की ऊंचाई के सापेक्ष) है, तो यह माता-पिता की ऊंचाई को प्रभावित करने वाला है। चूंकि बच्चे की ऊंचाई माता-पिता की ऊंचाई पर निर्भर है, और माता-पिता की ऊंचाई बच्चे की ऊंचाई पर निर्भर है, हम या तो गलत ऊंचाई, या एक अनंत लूप होगा। निश्चित रूप से, यह केवल उस मामले को प्रभावित करता है जहां माता-पिता === माता-पिता की भरपाई होती है, लेकिन फिर भी। यह एक अजीब मामला है जिसे हल करना मुश्किल है।

अद्यतन: अंतिम दो वाक्य पूरी तरह से सटीक नहीं हो सकते हैं। पत्ती तत्व की ऊँचाई (बिना बच्चों वाला बच्चा) इसके ऊपर के सभी तत्वों की ऊँचाई पर प्रभाव डालता है, इसलिए यह कई अलग-अलग स्थितियों को प्रभावित करता है।

Comments

ध्यान दें कि इस नियम के अपवाद हैं - CSS2.1 के खंड 10.6 में विभिन्न प्रकार के बक्से के लिए ऊंचाइयों की गणना के लगभग सभी उदाहरण शामिल हैं। और वास्तव में, ऐसे मामले जिनमें ऊंचाई में माता-पिता और बच्चे के बीच एक सह-संबंध शामिल होता है, अपरिभाषित व्यवहार की ओर ले जाते हैं।

— BoltClock

@sanjaypoyzer मैं सबसे सरल मामले में अनुमान लगाऊंगा कि ब्राउज़र (इन युक्तियों के रूट) में बाहर से ब्लॉक की चौड़ाई की गणना करते हैं, फिर उन ऊंचाइयों पर सामग्री को उनकी ऊँचाई (टिप्स को रूट) निर्धारित करने के लिए प्रवाहित करते हैं।

— sam

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

— u353

यह निर्भरता एक बीजगणितीय सूत्र है जिसका एक समाधान है और एक अनंत लूप में परिणाम नहीं देगा जब तक आप इसे इस तरह से हल करने के लिए नहीं चुनते हैं जो इसका सम्मान नहीं करता है। कहते हैं माता-पिता ऊंचाई है h_p। 10% का एक शीर्ष शीर्ष बच्चे को ऊंचाई देगा h_c = h_ci + 0.1h_p, जहां बच्चे h_ciकी आंतरिक ऊंचाई है और माता-पिता की ऊंचाई पर निर्भर नहीं है। एक बच्चे के लिए आप बस समीकरण h_p = h_ci + 0.1h_p=> से पैरेंट हाइट पाते हैं h_p = h_ci / 0.9। आप हमेशा ऐसा कर सकते हैं, चाहे आपके पास कितने बच्चे हों, यहां तक ​​कि अलग-अलग पैडिंग के लिए भी। इसका सिर्फ एक अज्ञात ( h_p) और एक समीकरण है।

— जेटी

मुझे नहीं लगता कि अनंत गणना इसका कारण है। एक साधारण कारण यह है: widthक्षैतिज रूप से एक ही समस्या में परिणाम का उपयोग करना ।

— जोय

Answer 2

"N%" मार्जिन (और पैडिंग) के लिए समान होना चाहिए के लिए मार्जिन टॉप / मार्जिन-सही / margin-bottom / मार्जिन छोड़ दिया है, सभी चार एक ही आधार के सापेक्ष होना है। यदि ऊपर / नीचे ने बाएं / दाएं की तुलना में एक अलग आधार का उपयोग किया है, तो "n%" मार्जिन (और गद्दी) का मतलब सभी चार पक्षों पर समान नहीं होगा।

(यह भी ध्यान रखें कि चौड़ाई के सापेक्ष शीर्ष / निचला मार्जिन एक अजीब सीएसएस हैक को सक्षम करता है जो आपको एक बॉक्स को अपरिवर्तित पहलू अनुपात के साथ निर्दिष्ट करने की अनुमति देता है ... भले ही बॉक्स को फिर से जोड़ा गया हो।)

Comments

... एक आश्चर्यजनक सरल उत्तर। हालांकि उपरोक्त सभी अनुमानों में योग्यता है, यह एक बहुत अच्छा बिंदु है। यह संभवतः एक ऐसा मामला है जहां कई समाधान सही होंगे, इसलिए उन्होंने सिर्फ एक का उपयोग करने की सबसे अधिक संभावना को चुना .... शायद?

— dudewad

मुझे लगता है कि वाक्यविन्यास में एक अतिरिक्त तत्व होना अच्छा होगा ताकि आप लिख सकें padding: n [type]। तो आपके पास padding: 5% logical(ओपी का सुझाव है) padding: 5% widthबैकवर्ड संगतता के लिए "चौड़ाई" के दूसरे पैरामीटर के साथ विरोध के रूप में होगा ।

— जेटी

"एन% मार्जिन (और पैडिंग) का मतलब चारों तरफ एक ही बात नहीं होगा" - लेकिन यह एक समस्या क्यों होगी?

— हर्बर्टुस

Answer 3

मैं इस JSFiddle (Chrome 46.0.2490.86 पर) के साथ खेलने के बाद और इस पोस्ट (चीनी में लिखा गया ) का जिक्र करने के बाद @ChuckKollars से जवाब देता हूं ।

---

अनंत गणना अनुमान के खिलाफ एक प्रमुख कारण यह है कि: widthएक ही अनंत गणना का सामना करना समस्या ।

इस JSFiddle पर एक नज़र डालें , parentप्रदर्शन है inline-block, जो उस पर मार्जिन / पैडिंग को परिभाषित करने के लिए योग्य है। childमार्जिन महत्व है 20%। यदि हम अनंत गणना अनुमान का पालन करते हैं :

1. की चौड़ाई childपर निर्भर करता हैparent
2. की चौड़ाई parentपर निर्भर करता हैchild

लेकिन परिणामस्वरूप, क्रोम ने गणना को कहीं रोक दिया, जिसके परिणामस्वरूप:

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

तो हम देख सकते हैं: अनंत गणना को रोकने का कोई तरीका है ।

---

मैं इस अनुमान से सहमत हूं कि: यह डिज़ाइन सिर्फ एक ही माप के आधार पर चार मार्जिन / पैडिंग मान रखने के लिए है।

यह पोस्ट (चीनी में लिखी गई) भी एक और कारण प्रस्तावित करती है, वह यह है: यह पढ़ने / टाइपसेट के उन्मुखीकरण के कारण है। हम ऊपर से नीचे तक, चौड़ाई निश्चित और ऊंचाई अनंत (वस्तुतः) के साथ पढ़ते हैं।

Comments

ऐसा इसलिए है क्योंकि वेब पेज आम तौर पर अनंत दिशा में लंबवत स्क्रॉल करते हैं; इसलिए चौड़ाई की गणना ब्राउज़र विंडो की चौड़ाई से की जा सकती है। एकमात्र तरीका तत्व स्क्रीन की तुलना में व्यापक हैं यदि आप उनकी चौड़ाई को बड़ा होने के लिए निर्दिष्ट करते हैं। विशिष्ट ब्लॉक तत्वों की चौड़ाई 100% है और ऊर्ध्वाधर दिशा (अज्ञात) में स्वचालित रूप से विस्तारित होती है। इसलिए चौड़ाई में समान समस्या नहीं है।

— ल्यूसेंट फॉक्स

Answer 4

मुझे पता है कि ओपी पूछ रहा है कि सीएसएस विनिर्देशन चौड़ाई के% (और, जैसा कि माना जाएगा, ऊंचाई) के रूप में शीर्ष / निचले मार्जिन प्रतिशत को परिभाषित करता है, लेकिन मुझे लगा कि संभावित समाधान पोस्ट करने के लिए भी उपयोगी हो सकता है।

अधिकांश आधुनिक ब्राउज़र अब vw और vh का समर्थन करते हैं जो आपको व्यूपोर्ट चौड़ाई और व्यूपोर्ट ऊँचाई के विरुद्ध मार्जिन संख्या निर्दिष्ट करने देता है।

यदि कोई स्क्रॉलबार नहीं है तो 100vw / 100vh 100% चौड़ाई / 100% ऊँचाई (क्रमशः) के बराबर है; अगर कोई स्क्रॉलबार है तो व्यूपोर्ट नंबर इसके लिए जिम्मेदार नहीं है (जबकि% नंबर करते हैं)। शुक्र है, लगभग सभी ब्राउज़र 17px के स्क्रॉलबार आकार का उपयोग करते हैं ( यहाँ देखें ) का उपयोग करते हैं, इसलिए आप इसके लिए सीएसएस कैल्क फ़ंक्शन का उपयोग कर सकते हैं। यदि आप नहीं जानते कि स्क्रॉलबार दिखाई देगा या नहीं, तो यह समाधान काम नहीं करेगा।

उदाहरण के लिए: कोई क्षैतिज स्क्रॉलबार नहीं मानकर, ऊंचाई के 50% के शीर्ष मार्जिन को "मार्जिन-टॉप - 50 वीएच" के रूप में परिभाषित किया जा सकता है। एक क्षैतिज स्क्रॉलबार के साथ, इसे "मार्जिन-टॉप: कैल्क (0.5 * (100vh - 17px))" के रूप में परिभाषित किया जा सकता है; (याद रखें कि कैल्क में माइनस और प्लस ऑपरेटरों को दोनों तरफ रिक्त स्थान की आवश्यकता होती है!)।

Comments

यह कई मामलों में एक उपयोगी समाधान है, लेकिन ऐसे बहुत सारे उदाहरण हैं जहां यह काम नहीं करता है (जैसे यदि आप सामग्री को फिट करने के लिए आनुपातिक रूप से फ्लेक्सबॉक्स कंटेनर के आकार के अनुरूप बनाने की कोशिश कर रहे हैं जो उपलब्ध स्थान को भरने के लिए बढ़ता है, जबकि एक और बॉक्स है चर सामग्री)।

— जूल्स