एक कंटेनर div के अंदर एक div के मार्जिन-टॉप को समायोजित करने से शरीर से आंतरिक div और कंटेनर div दोनों को धक्का देता है

मुझे लगता है कि यह मुझे मूर्खतापूर्ण कुछ करने का मुद्दा होना चाहिए, लेकिन मैं इसे समझ नहीं सकता। Here's a demo page showing my problem. पृष्ठ का स्रोत:एक कंटेनर div के अंदर एक div के मार्जिन-टॉप को समायोजित करने से शरीर से आंतरिक div और कंटेनर div दोनों को धक्का देता है

<html> 
<head> 
    <title>demo</title> 
    <style type='text/css'> 
     body{ 
      margin: 0px; 
      padding: 0px; 
     } 
     #container{ 
      height: 100%; 
      background-color: black; 
     } 
     #logo{ 
      margin: 25px auto auto auto; 
      width: 360px; 
      height: 45px; 
      background-color: goldenrod; 
     } 
    </style> 
</head> 
<body> 
    <div id='container'> 
     <div id='logo'> 
      <p>logotext.</p> 
     </div> 
    </div> 
</body> 
</html>

तो अधिक आप मार्जिन के शीर्ष मूल्य, आगे पेज नीचे दोनों #logo और घसीटा हो #container समायोजित करें। # कंटेनर रखना चाहिए और # लोगो को पृष्ठ को स्थानांतरित करना चाहिए।

स्रोत

2011-12-16 mikemcg

यहाँ परीक्षकों के लिए एक बेला है। #logo पर 25px मार्जिन समायोजित करें और ध्यान दें कि ब्लैक बार पृष्ठ को कैसे नीचे ले जाता है। http://jsfiddle.net/bzVgV/1/ – mrtsherman

यह मार्जिन को ध्वस्त करने के कारण होता है। यदि दो तत्व मार्जिन को छूते हैं, तो मार्जिन विलय हो जाता है। इस here का एक महान स्पष्टीकरण है। Collapsing Margins Between Parent and Child Elements नामक अनुभाग पर जाएं।

यहां तीन अलग-अलग समाधान हैं।

एक कंटेनर में overflow: auto जोड़ने के लिए है। यह बीसीएफ (ब्लॉक स्वरूपण संदर्भ) को बदलता है। इस तकनीक को here अधिक विस्तार से वर्णित किया गया है।

#container { 
    height: 100%; 
    background-color: black; 
    /* Add oveflow auto to container */ 
    overflow: auto; 
}

http://jsfiddle.net/bzVgV/20/

एक दूसरे लोगो पर एक मार्जिन के बजाय कंटेनर पर गद्दी उपयोग करने के लिए है। यह समीकरण के बाहर मार्जिन लेता है।

#container { 
    height: 100%; 
    background-color: black; 
    /* Use padding on container instead of margin on logo */ 
    padding-top: 30px; 
}

http://jsfiddle.net/bzVgV/18/

एक अंतिम समाधान मार्जिन अब स्पर्श करना है। आप माता-पिता को 1px पैडिंग जोड़कर ऐसा कर सकते हैं।

#container { 
    height: 100%; 
    background-color: black; 
    /* Now margins of container and logo won't touch */ 
    padding-top: 1px; 
}

http://jsfiddle.net/bzVgV/21/

स्रोत

2011-12-16 04:26:06 mrtsherman

मार्जिन को संकुचित करना मैंने कभी देखा है कि अजीब बात है। लेकिन यह जानना अच्छा है कि वास्तव में क्या हो रहा है। आपके सहयोग के लिए धन्यवाद! – mikemcg

अपना उत्तर अधिक पूरा करने के लिए, चलने वाले बाल तत्वों में यह समस्या भी नहीं है। हालांकि यह मार्जिन-बाएं और मार्जिन-दाएं ऑटो को सेट करने के कारण यहां लागू नहीं है! – Mohsenme

एक कंटेनर div के अंदर एक div के मार्जिन-टॉप को समायोजित करने से शरीर से आंतरिक div और कंटेनर div दोनों को धक्का देता है

उत्तर

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