अजीब सीएसएस व्यवहार ... 1px सीमा को हटाकर <DIV> लगभग 20px - css, html-parsing को स्थानांतरित करता है

मेरे पास निम्नलिखित है:

सीएसएस

#pageBody
{
height: 500px;
padding:0;
margin:0;
/*border: 1px solid #00ff00;*/
}

#pageContent
{
height:460px;
margin-left:35px;
margin-right:35px;
margin-top:30px;
margin-bottom:30px;
padding:0px 0 0 0;
}

    <div id="pageBody">
<div id="pageContent">
<p>
blah blah blah
</p>
</div>
</div>

अगर मैं पेजबॉडी में बॉर्डर लाइन को अनसुना कर दूं,सब कुछ मीठा हो जाता है ... मुझे उम्मीद थी कि चीजों को सत्यापित करने के लिए सीमा थी। लेकिन बॉर्डर को हटाते हुए, पेजबॉडी पृष्ठ को 20px तक नीचे गिरा देता है, जबकि पेज कॉन्टेंट बिल्कुल भी स्थानांतरित नहीं होता है।

अब यह वास्तविक पृष्ठ नहीं है, बल्कि एक सबसेट है। अगर कुछ भी स्पष्ट नहीं है, तो मैं काम करने के लिए न्यूनतम नमूना तैयार करने का प्रयास कर सकता हूं, लेकिन मैंने सोचा कि पहले एक आसान त्वरित उत्तर हो सकता है।

मुझे Chrome और IE8 में समान समस्या दिखाई दे रही है,सुझाव है कि यह मुझे ब्राउज़र नहीं है। कोई भी सुझाव जहां को देखना है? मैंने सोचा कि शायद 1px सीमा कुछ टिपिंग बिंदु थी जो एक div की सामग्री को बहुत बड़ा बना देती है, लेकिन #pageContent ऊँचाई को 400 में बदलकर क्लिपिंग के अलावा कोई फर्क नहीं पड़ता है। नीचे उस div बंद।

उत्तर:

जब आप कोई बॉर्डर या मार्जिन जोड़ते हैं, तब प्रकट होता है pageBody, के ऊपर pageContent के रूप में गणना की जाती है pageBody.border + pageBody.margin + pageContent.margin-top। और लगता है कि इसकी अनदेखी हुई pageContent.margin-top.

यह एक विशिष्ट मामला है मार्जिन ढहना

हाशिये ढह रहे हैं।
(# पेजबॉडी रेड बैकग्राउंड और # पेज कॉन्टेंट ब्लू बैकग्राउंड देने के साथ दिखाई देगा।)

यह है: चूंकि दोनों ब्लॉक तत्व हैं और मार्जिन छू रहे हैं, वे एक साथ गिरते हैं और बड़ा प्रभाव में रहता है।
यदि दोनों हाशिये के बीच कोई सीमा या पैडिंग है, तो वे "t समीप नहीं होते हैं और इस प्रकार" t पतन होते हैं।

यह अपेक्षित व्यवहार है: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

सेटिंग का प्रयास करें position: relative; आपके div "s ... I" में पहले से इसी तरह के मुद्दों को ठीक करना था।