पेरेंट डिवी विरासत बच्चे divs मार्जिन

Question

यह हर समय नहीं होता है, लेकिन हर बार कुछ समय में, माता-पिता div बच्चे को div div गुणों को विरासत में लेता है और मेरे लेआउट को फटकार से बाहर निकाल देता है।

<div 1> 
    <div 2> 
     content here 
    </div> 

</div><!-- div one end --> 

CSS (छद्म):

#1{ margin top:0; } 
#2 {margin top:10 } 

अपनी इस तरह दिखना चाहिए था: div 1 माता पिता और div 2

उदाहरण के लिए

, इस एचटीएमएल (छद्म) है बच्चे

div 1parent

----------------------------------------- 
this is address bar (top of win) 
----------------------------------------- 
---------------- 
| ---------- | 
| | div2Child | 
| ------------ | 
|--------------| 

मान लें कि div 1 से addy विंडो में कोई अंतर नहीं है।

अब, कुछ अजीब कारण, ऊपर एक ही कोड का उपयोग कर, जब मैं पूर्वावलोकन के लिए, मैं प्राप्त करें:

----------------------------------------- 
this is address bar (top of win) 
----------------------------------------- 

gap here. 

---------------- 
| ---------- | 
| | div2  | 
| ------------ | 
|--------------| 

कोई बात नहीं मैं क्या कर मैं अभी भी उस खाई को मिलता है। जब मैं इसे डिव्स पर फायरबग और टेस्ट पर ले जाता हूं, div2 स्पष्ट रूप से दिखाता है कि मार्जिन माता-पिता की स्थिति को प्रभावित कर रहा है।

..i एक उदाहरण प्रस्तुत करने जा रहा था लेकिन ... अच्छी तरह से यहाँ है वास्तविक कोड आप देख सकते हैं तो ... (सरल रूप में हो सकता है)

HTML:

<div id="one"> 
    <div id="two">content here on 2</div> 
</div> 

the CSS: 

    #one{ 
     width:1000px; 
     height:300px; 
     background:#09F; 
     margin-top:0px !important; 
padding:0px; 


    } 

    #two{ 
     width:500px; 
     height:100px; 
     background:red; 
     margin-top:20px; 
padding:0px; 
    } 

और मुझे अभी भी मेरे आरेख में दिखाया गया अंतर मिलता है। मुझे पागल क्या करता है, हम में से अधिकांश की तरह, हमने लाखों बार इस लेआउट को किया है .... मैं इस विधि का उपयोग करने वाले कार्यों के डोज़न को खींच सकता हूं और कोई समस्या नहीं है ... मेरे पास मेरा सीएसएससेट है जो मैं हमेशा उपयोग करता हूं। है! महत्वपूर्ण, कोई यादृच्छिक <br/> or <p>, 0 पैडिंग ... सुनिश्चित करने के लिए तथ्य की बात है, मैंने एक डमी पेज बनाया है, लेकिन 2 divs और उनके सीएसएस के साथ कुछ भी नहीं ........

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

Answer 1

जो आप देख रहे हैं वह मार्जिन-पतन है। यह उन परिदृश्यों में हो सकता है जो हमेशा समझने के लिए सरल नहीं होते हैं, इसलिए मैं documentation का जिक्र करने का सुझाव देता हूं।

Answer 2

का उपयोग नहीं क्यों:

#one{ 
     width:1000px; 
     height:300px; 
     background:#09F; 
     margin-top:0px !important; 
     padding-top:20px; 
    } 
    #two{ 
     width:500px; 
     height:100px; 
     background:red; 
     margin-top:0px; 
     padding:0px; 
    }​ 

? बस सोच