CSS margin-bottom collapsed - but why? -

मेरे पास यह सरल एक्सएचटीएमएल है:

  & lt;? Xml संस्करण = "1.0" एन्कोडिंग = "UTF-8" & gt; & Lt;! DOCTYPE HTML PUBLIC "- // W3C // DTD एक्सएचटीएमएल 1.0 सशक्त // एन" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> & Lt; html xmlns = "http://www.w3.org/1999/xhtml" शैली = "ऊंचाई: 100%;" & gt; & Lt; शीर्ष & gt; & Lt; / head & gt; & Lt; शरीर शैली = "ऊंचाई: 100%;" & gt; & Lt; div शैली = "ऊंचाई: 100%; अतिप्रवाह: ऑटो; पृष्ठभूमि रंग: # 00f;" & gt; & Lt; div शैली = "ऊंचाई: 400px; मार्जिन-नीचे: 2000px; पृष्ठभूमि-रंग: # एफएएफ;" & gt; & lt; / div & gt; & Lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;  

यह दो आयत दिखाता है - लेकिन निचला (नीला) 2000px मार्जिन नहीं दिखाता है। यह खिड़की जितना लंबा है। क्यूं कर? या इससे भी महत्वपूर्ण बात, मैं इसे कैसे दिखाने के लिए करूँ? मैं उन दो & lt; / div & gt; & lt; / div & gt; के बीच 'एएए' जैसे कुछ डमी पाठ जोड़ सकते हैं, लेकिन मुझे नहीं लगता कि यह करने का सही तरीका है ।

मदद के लिए बहुत कुछ!

अगर आप नीचे नीले रंग के 2000px चाहते हैं 400px div, यह परिवर्तन करें:

उस सामग्री की ऊंचाई + 2000px स्थान होने के लिए युक्त div की ऊंचाई बदलें।

  & Lt;? Xml संस्करण = "1.0" एन्कोडिंग = "UTF-8"? & Gt; & Lt;! DOCTYPE HTML PUBLIC "- // W3C // DTD एक्सएचटीएमएल 1.0 सशक्त // एन" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> & Lt; html xmlns = "http://www.w3.org/1999/xhtml" शैली = "ऊंचाई: 100%;" & gt; & Lt; शीर्ष & gt; & Lt; / head & gt; & Lt; शरीर शैली = "ऊंचाई: 100%;" & gt; & Lt; div शैली = "ऊंचाई: 2400px; अतिप्रवाह: ऑटो; पृष्ठभूमि रंग: # 00f;" & gt; & Lt; div शैली = "ऊंचाई: 400px; पृष्ठभूमि रंग: # एफएएफ;" & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;