प्रतिशत मार्जिन क्यों एक नई लाइन का कारण बनता है?

Question

<div style = "float : left; background-color: #dd3fb8;"> 
    <a style = "margin-left : 10%;">a</a> 
    <a>b</a> 
    <a>c</a> 
</div> 

उपरोक्त उदाहरण, पत्र "सी" नई लाइन पर होगा, लेकिन अगर मैं सेट "margin-left" पिक्सल इकाई के लिए, "सी" के रूप में "एक" और "b एक ही लाइन पर किया जाएगा में "। ऐसा क्यों होता है?

Answer 1

दुर्भाग्यवश, CSS2.1 spec के लिए इसका स्पष्ट उत्तर नहीं दिखता है। वास्तव में, मैं कहूंगा कि यह अनिर्धारित व्यवहार के दायरे में अच्छी तरह से है। एक निर्धारित चौड़ाई shrink to fit their contents होगा बिना

• मंगाई:

  यहाँ मैं पा सकते हैं प्रासंगिक अंक हैं। केवल इनलाइन सामग्री के साथ फ्लोट के मामले में, फ्लोट को केवल एक पंक्ति (इसकी स्पष्ट रेखा ब्रेक के बावजूद) पर अपनी सामग्री को फिट करने के लिए काफी व्यापक बनाया जाना चाहिए और अब और नहीं।

• प्रतिशत मार्जिन की गणना based on the width of the containing block की गणना की जाती है।

  ध्यान दें कि यह कहते हैं:

  धारक ब्लॉक की चौड़ाई इस तत्व पर निर्भर करता है, तो जिसके परिणामस्वरूप लेआउट सीएसएस 2.1 में अपरिभाषित है।

  ... लेकिन जहां तक ​​मैं देख सकता हूं, व्यवहार सभी ब्राउज़रों में सुसंगत है।

  कहा जा रहा है, कारण इस बयान पर लागू होता है है, क्योंकि के बाद से इनलाइन तत्व के मार्जिन नाव की सामग्री के सीमा के भीतर गिर जाता है, यह कहा जा सकता है कि नाव की चौड़ाई (इनलाइन तत्वों के धारक ब्लॉक) इस तत्व पर निर्भर करता है (तत्व मार्जिन वाला है)।

यहाँ मैं क्या यह मान सकते हैं ऊपर अंक के आधार पर दिया गया है:

• जब मार्जिन प्रतिशत के रूप में निर्दिष्ट किया जाता है, नाव की चौड़ाई को ध्यान में मार्जिन लेने के बिना गणना की जाती है, क्योंकि मार्जिन की गणना करना संभव नहीं है फ्लोट की चौड़ाई निर्धारित की गई है।

  मार्जिन की गणना तब फ्लोट की प्रयुक्त चौड़ाई के आधार पर की जाती है, और अक्षर "सी" को "ए" पर मार्जिन द्वारा आगे धकेलने के परिणामस्वरूप एक नई पंक्ति में लपेटता है। फ्लोट की चौड़ाई बदलती नहीं है।

  फिर से, इस व्यवहार में से कोई भी बिल्कुल निर्दिष्ट नहीं है, और इसलिए तकनीकी रूप से यह spec का उल्लंघन नहीं कर रहा है। हालांकि, यह समझदार लगता है।

• जब मार्जिन को पिक्सेल मान के रूप में निर्दिष्ट किया जाता है, तो मार्जिन की गणना पहले की जाती है। फ्लोट की चौड़ाई को इस मार्जिन को ध्यान में रखते हुए गणना की जाती है (याद रखें कि क्षैतिज मार्जिन सामान्य रूप से इनलाइन तत्वों पर लागू होते हैं)। सिकुंक-टू-फिट एल्गोरिदम के अनुसार, यह पसंदीदा चौड़ाई है: केवल एक लाइन पर सभी इनलाइन तत्वों को रखने के लिए पर्याप्त विस्तृत है।

  प्रतिशत मार्जिन के साथ विपरीत, यह बहुत स्पष्ट है, के रूप में कार्यान्वयन कोई परेशानी नहीं की गणना के मार्जिन के लिए शुद्ध मान की गणना पहले होनी चाहिए।

मुझे किसी भी ब्राउज़र में यह बग कॉल करने के लिए कड़ी मेहनत की जाएगी, खासकर जब से वे सभी लगातार व्यवहार करते हैं।

अन्त में, जाहिर है, आप इस अपरिभाषित व्यवहार पूरी तरह से बस जहां संभव हो अपने तैरता स्पष्ट चौड़ाई देकर बच सकते हैं। यह को समझने में मदद करता है क्यों आपको ऐसा करना चाहिए।

Answer 2

अपने div के बाद से जारी है, और इसके widthauto (परोक्ष), http://www.w3.org/TR/CSS21/visudet.html#float-width लागू होता है:

'चौड़ाई' 'ऑटो' के रूप में गणना की जाती है, तो इस्तेमाल किया मूल्य है "हटना करने के लिए फिट " चौड़ाई।

"हटना करने के लिए फिट" चौड़ाई मूल रूप से इसका मतलब है, तत्व के रूप में विस्तृत हो के रूप में अपनी ही संतोष करना ऐसा करना आवश्यक हो सकते हैं।

अब margin-left के बिना, यह कोई समस्या नहीं है: आपके सभीतत्व इनलाइन तत्व हैं जिनमें प्रत्येक विशिष्ट वर्ण होता है - उनकी व्यक्तिगत चौड़ाई निर्धारित करने के लिए पर्याप्त आसान है, और उन्हें जोड़ें।

लेकिन अब आप एक margin-leftप्रतिशत में, और यहाँ बातें जटिल हो चाहते हैं - अगर हम the definition for margin-left को देखो, यह कहते हैं:

प्रतिशत: ब्लॉक

युक्त की चौड़ाई को देखें अब, यह हमें में एक अचार का एक सा है, क्योंकि धारक ब्लॉक (जो जारी div तत्व द्वारा स्थापित है), की चौड़ाई इसकी सामग्री के आधार पर गणना की जाती है छोड़ देता है - लेकिन अब इस margin-leftहोगा परिवर्तन है कि सामग्री के समग्र चौड़ाई है, लेकिन अपने आप में धारक ब्लॉक, यह अपने आप में प्रभावित करती है जिनमें से width पर निर्भर है ...

दो माप निर्भर प्रत्येक पर हैं की एक शास्त्रीय समस्या है कि अन्य ... और यह मूल रूप से असंगत के लिए है।

http://www.w3.org/TR/CSS21/box.html#margin-properties कहते हैं,

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

---

संपादित करें: के रूप में क्या BoltClock अपने जवाब में कहा कि मूल रूप से एक ही है, बस मुझे ले गया थोड़ी देर ...

Answer 3

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

• सामग्री की चौड़ाई करते हैं (और इसलिए कंटेनर) हो 30px
• जोड़े 30px का 10% = 3px लिंक करने के लिए मार्जिन छोड़ दिया
• कंटेनर के परिणामस्वरूप चौड़ाई है 30 + 3 = 33px

यह एक पाश जहां बाहरी चौड़ाई के रूप में मार्जिन बढ़ जाती है बढ़ जाती है और बाहरी चौड़ाई बढ़ जाती है के रूप में मार्जिन बढ़ जाती है बनाता है (33px = 3.3px का 10% का अर्थ है कंटेनर चौड़ाई 33px से 33.3px ए में बदलती है डी आगे)। इस तरह के गणना के लिए परिणामी व्यवहार अपरिभाषित है (जैसा कि CBroe द्वारा इंगित किया गया है)।

ब्राउज़र 30px चौड़ाई के साथ लूप और छड़ से बचने लगता है। गणना के बाद पेश किया गया 3 पीएक्स मार्जिन तीसरे लिंक को दूसरी पंक्ति में बहने का कारण बनता है। ब्राउज़र फिर से 30px चौड़ाई के साथ चिपके हुए लूप से बचाता है।