आंतरिक div का मार्जिन div के मार्जिन

Question

को प्रभावित करता है जिसमें मेरे पास एक div div के अंदर एक आंतरिक div है।

एचटीएमएल

<div id="container"> 
    <div id="inner"></div> 
</div> 

सीएसएस

#container { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#inner { 
    margin: 30px; 
    width: 40px; 
    height: 40px; 
    background-color: black; 
} 

फिडल

http://jsfiddle.net/8xUTJ/4/

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

क्या कोई यह बता सकता है कि सीएसएस क्या सोचता है कि यह यहां कर रहा है?

Answer 1

overflow:auto#container div में जोड़ें।

jsFiddle example

या

#container div करने के लिए एक सीमा जोड़ें।

आप W3C पर इस संक्षिप्त मार्जिन व्यवहार के बारे में अधिक पढ़ सकते हैं।

Answer 2

विधि 1

भीतरी div के लिए position:absolute, तो यह क्या जानता से

http://jsfiddle.net/8xUTJ/5/

---

विधि 30px मार्जिन होने के लिए 2

+०१२३५१६४१०६१

भीतरी div

http://jsfiddle.net/8xUTJ/7/

---

विधि 3

border:solid 0 transparent बाहरी div करने के लिए display:inline-block

http://jsfiddle.net/8xUTJ/8/

अपने पिकअप ले लो :)

Answer 3

जबकि प्रदान किए गए समाधान व्यवहार्य हैं, कोई भी समस्या का वर्णन नहीं करता है। इसे मार्जिन ढहने कहा जाता है जो कई परिदृश्यों में होता है।

परिदृश्य 1 - ये आइटम केवल 30px अलग होंगे, क्योंकि मार्जिन एक साथ गिर जाते हैं और बड़ा वाला प्रबल होता है।

<div style="margin-bottom: 20px"></div> 
<div style="margin-top: 30px"></div> 

परिदृश्य 2 - (आपका परिदृश्य) बाहरी बॉक्स के बाहर भीतरी बॉक्स के मार्जिन का मार्जिन फैलता है।

<div class="outer"> 
    <div style="margin-top: 20px"></div> 
</div> 

समाधान बाहरी बॉक्स को कुछ पैडिंग या सीमा (दूसरों द्वारा सुझाए गए अनुसार) देना है। कई बार, मैं बाहरी बॉक्स पर निम्नलिखित सीएसएस का उपयोग इस तरह की स्थितियों को कम करने:

.outer { 
    margin-top: -1px; 
    border-top: 1px solid transparent; 
} 

Answer 4

जांच इस fiddle

आप float भीतरी div की जरूरत बनाने के लिए यह काम

#inner {  
    margin:30px; 
    float:left; /* give float */ 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}​ 

या तो overflow:auto संपत्ति div#container पर दें।

जांच इस fiddle

Answer 5

पहले, #containermargin-top:0 और #inner है margin-top:30px है। इन तत्वों का रिश्ता माता-पिता और पहले बच्चे का है।

अगर कोई सीमा, गद्दी, इनलाइन सामग्री, या निकासी है को अपनी पहली बच्चे ब्लॉक के मार्जिन टॉप, या कोई सीमा, गद्दी, इनलाइन सामग्री के साथ एक ब्लॉक का मार्जिन टॉप को अलग, ऊंचाई, न्यूनतम ऊंचाई, या अधिकतम ऊंचाई ऊंचाई को के मार्जिन-तल को अलग करने के लिए अपने अंतिम बच्चे के मार्जिन-तल के साथ, फिर उन मार्जिन पतन हो जाती है। ढह गया मार्जिन माता-पिता के बाहर समाप्त होता है।

मार्जिन गिर साधन इन मार्जिन एक भी मार्जिन जिसका आकार भी मार्जिन कि शून्य हैं करने के लिए में

ये नियम लागू होते हैं संयुक्त मार्जिन में सबसे बड़ा है में संयुक्त रहे हैं, ताकि के मार्जिन एक प्रथम/अंतिम बच्चा अपनी मूल के बाहर समाप्त होता है (उपरोक्त नियमों के अनुसार) है या नहीं, माता-पिता के मार्जिन शून्य

यही कारण है कि आप एन है