2012-03-16 11 views
5

माता-पिता अतिप्रवाह पर सेट होने पर लंबवत मार्जिन गायब क्यों होते हैं: दृश्यमान? यदि यह ओवरफ़्लो पर सेट है: छुपा मार्जिन फिर से दिखाई दे रहा है। यह counterintuitive लगता है।अभिभावक मार्जिन गायब हो जाते हैं जब अभिभावक अतिप्रवाह पर सेट होता है: दृश्य

मुझे लगता है कि मैं समझता हूं कि तत्व की सामग्री उसमें फिट नहीं होने पर ओवरफ्लो कैसे काम करना चाहिए, लेकिन मुझे समझ में नहीं आता कि मार्जिन के साथ क्या हो रहा है।

यहाँ एक उदाहरण है: (http://jsfiddle.net/VrVc7/)

#outer { 
    background-color:#EEE; 
    overflow:hidden; 
} 

#inner { 
    margin: 30px; 
    padding: 5px; 
    background-color:#ABE; 
} 

<div id="outer"> 
    <div id="inner">abc</div> 
</div> 

उत्तर

4

यह क्योंकि टूट मार्जिन की है:

आप अतिप्रवाह है: छिपा हुआ, भीतरी div के हाशिये बाहरी div के अंदर रहते हैं।
यदि आपके पास अतिप्रवाह है: दृश्यमान, ऊपर और नीचे मार्जिन बाहरी div के शून्य मार्जिन के साथ collpase, क्योंकि वे एक दूसरे को छूते हैं। इसके बाद आंतरिक मार्जिन के समान होने के लिए पुन: गणना की जाती है।

तो, ओवरफ्लो: छुपा हुआ अंदर के साथ ढहने वाले मार्जिन को तोड़ देगा। बाहरी div को पैडिंग या सीमा देकर आप मार्जिन को तोड़ सकते हैं। तो वे एक दूसरे को स्पर्श नहीं है और इसलिए कोई गिर

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

+0

क्या यह अतिप्रवाह का दुष्प्रभाव है: छुपा हुआ? या क्या यह वास्तव में स्पर्श से मार्जिन को रोकता है, और यदि ऐसा है तो कैसे? मुझे यकीन नहीं है कि मैं जो कुछ पूछने की कोशिश कर रहा हूं उसे व्यक्त करना है। मेरा मतलब है कि कुछ नियमों के अनुसार गैर-ढहने लगते हैं, शायद नीचे दी गई में से एक संदीप द्वारा सूचीबद्ध है, या मार्जिन वास्तव में स्पर्श नहीं कर रहे हैं और उस मामले में यह कैसे पूरा किया जाता है। – seron

+0

बीटीडब्ल्यू, वह लिंक काफी उपयोगी था। – seron

1

मुझे पता है कि यह क्या यह की तरह लग रहा है। लेकिन वास्तव में यहां क्या हो रहा है उसे मार्जिन ढहने कहा जाता है। ज्यादातर समय यदि माता-पिता के पास मार्जिन होता है, या यदि दो भाई बहनों के पास मार्जिन होता है तो एक दूसरे से अधिक गोद लेते हैं। आप बच्चों पर 10 के अंतर रखते हैं

|--| 
|[]| 
|[]| 
|[]| 
|--| 

: तीन बच्चों के साथ कल्पना कीजिए कि आप एक div है। प्रत्येक बच्चे के बीच कुल 10 लंबवत दूरी होगी, भले ही आप 20 वर्ष की उम्मीद करेंगे। ऐसा इसलिए है क्योंकि यदि मार्जिन साझा किए जाते हैं तो वे एक-दूसरे में गिर जाते हैं।

किसी भी तरह से Google इसे, जो इसे कभी भी बेहतर से समझाएगा।

7

यह collapsing margin कहा जाता है। W3c

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

collapsing margin से कैसे रोकें।

एक जारी बॉक्स और किसी भी अन्य बॉक्स के बीच
  1. मार्जिन पतन नहीं है (यहां तक ​​कि एक नाव और उसके में प्रवाह बच्चों के बीच नहीं)।
  2. नए ब्लॉक प्रारूपण संदर्भों को स्थापित करने वाले तत्वों के मार्जिन (जैसे 'दृश्यमान' के अलावा 'ओवरफ्लो' वाले फ्लोट और तत्व) अपने इन-फ्लो बच्चों के साथ पतन न करें।
  3. पूरी तरह से स्थित बक्से के मार्जिन पतन नहीं होते हैं ( उनके इन-फ्लो बच्चों के साथ भी नहीं)।
  4. इनलाइन-ब्लॉक बॉक्स के मार्जिन पतन नहीं होते हैं (उनके इन-फ्लो बच्चों के साथ भी नहीं)।
  5. इन-फ्लो ब्लॉक-स्तरीय तत्व का निचला मार्जिन हमेशा को अपने अगले इन-फ्लो ब्लॉक-स्तरीय भाई के शीर्ष मार्जिन के साथ ढहता है, जब तक कि भाई को मंजूरी मिलती है।
  6. इन-फ्लो ब्लॉक तत्व का शीर्ष मार्जिन इसके पहले इन-फ्लो ब्लॉक-स्तर के बच्चे के शीर्ष मार्जिन के साथ गिर जाता है यदि तत्व के पास शीर्ष सीमा नहीं है, कोई शीर्ष पैडिंग नहीं है, और बच्चे को कोई मंजूरी नहीं है।
  7. 'ऑटो' की 'ऊंचाई' के साथ एक इन-फ्लो ब्लॉक बॉक्स का निचला मार्जिन और शून्य के 'न्यूनतम-ऊंचाई' के आखिरी इन-फ्लो ब्लॉक-स्तर के बच्चे के नीचे मार्जिन के साथ शून्य के ढहने के साथ कोई नीचे पैडिंग और कोई निचली सीमा नहीं है और बच्चे का निचला मार्जिन को उस शीर्ष मार्जिन के साथ पतन नहीं करता है जिसमें मंजूरी है।
  8. 'मिनी-ऊंचाई' संपत्ति शून्य है, और उसके पास न तो शीर्ष या नीचे सीमाएं हैं और न ही शीर्ष या नीचे पैडिंग, है और इसमें 0 या 'ऑटो' की 'ऊंचाई' है, तो एक बॉक्स का अपना मार्जिन पतन हो जाता है, और इसमें एक लाइन बॉक्स नहीं है, और इसके सभी इन-फ्लो बच्चों के मार्जिन (यदि कोई हैं) पतन।
+0

मुझे लगता है कि यह सूची आपके द्वारा शामिल लिंक से है, लेकिन कुछ ऐसे शब्द हैं जिन्हें मैं समझ नहीं पा रहा हूं। 'इन-फ्लो' क्या है? मैं विभिन्न ब्लॉक-शब्दावली से भी उलझन में हूं। – seron

+0

+1 अच्छी लंबी सूची के लिए – HerrSerker

+0

@ सेरॉन इन-फ्लो का मतलब है कि कोई स्थिति या फ़्लोटिंग नहीं है। वे एक दूसरे के बगल में कुछ साधारण भाई बहन हैं – HerrSerker

संबंधित मुद्दे