सीएसएस मार्जिन आतंक; मार्जिन मूल तत्व के बाहर स्थान जोड़ता है

मेरा सीएसएस मार्जिन जिस तरह से मैं चाहता हूं या उससे अपेक्षा करता हूं उससे व्यवहार नहीं करता है। मुझे लगता है कि मेरे हेडर मार्जिन-टॉप इसके आस-पास के div-टैग को प्रभावित करते हैं। What I want.... सीएसएस मार्जिन आतंक; मार्जिन मूल तत्व के बाहर स्थान जोड़ता है

... लेकिन यह है कि क्या मैं के साथ अंत है: What I get...

स्रोत:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Margin test</title> 

<style type="text/css"> 
body { 
    margin:0; 
} 
#page { 
    margin:0; 
    background:#FF9; 
} 
#page_container { 
    margin:0 20px; 
} 
h1 { 
    margin:50px 0 0 0; 
} 
</style> 

</head> 

<body> 

<div id="page"> 
    <div id="page_container"> 
     <header id="branding" role="banner"> 
      <hgroup> 
       <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1> 
       <h2 id="site-description">Description</h2> 
      </hgroup> 
     </header> 
    </div> 
</div>

यह मैं क्या चाहते हैं और उम्मीद करते हैं है

मैंने इस एक्सपेम्प में मार्जिन अतिरंजित किया है le। एच 1-टैग पर डिफ़ॉल्ट ब्राउज़र मार्जिन कुछ हद तक छोटा है, और मेरे मामले में मैं ट्विटर बूटस्ट्रैप का उपयोग करता हूं, Normalizer.css जो डिफ़ॉल्ट मार्जिन को 10px पर सेट करता है। यह महत्वपूर्ण नहीं है, मुख्य बिंदु है; मैं नहीं कर सकता, नहीं, नहीं चाहता है h1-tag पर मार्जिन बदलें।

मुझे लगता है कि यह मेरे अन्य प्रश्न के समान है; Why does this CSS margin-top style not work?। प्रश्न यह है कि मैं इस विशिष्ट मुद्दे को कैसे हल करूं?

मैंने इसी तरह की समस्याओं पर a few threads पढ़ा है, लेकिन कोई वास्तविक उत्तर और समाधान नहीं मिला है। मुझे पता है कि padding:1px; या border:1px; समस्या हल करती है। लेकिन यह केवल नई समस्याएं जोड़ता है, क्योंकि मैं पैडिंग नहीं चाहता और न ही मेरे div-टैग पर एक सीमा।

एक बेहतर, सर्वोत्तम अभ्यास, समाधान होना चाहिए? यह बहुत आम होना चाहिए।

स्रोत

2012-11-26 jamietelin

आप के साथ शुरू किया था एक सीएसएस रीसेट? –

मैं Normalizer.css का उपयोग करता हूं। लेकिन यह मुद्दा नहीं है। अगर मैं एच 1-टैग हटा देता हूं। कोई समस्या नहीं है। समस्या यह है कि मैं अपने एच 1 टैग पर मार्जिन चाहता हूं और यह आसपास के तत्वों को प्रभावित कर रहा है। – jamietelin

क्या आप [डेमो पोस्ट कर सकते हैं] (http://jsfiddle.net/) किसी भी मौके से? –

128

overflow:auto अपने #page div में जोड़ें।

jsFiddle example

और collapsing margins की जाँच जब आप इसे पर हैं।

स्रोत

2012-11-26 21:49:28 j08691

यह काम करता है। यहां उदाहरणों का भार मिला है (http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html) साथ ही कुछ अच्छी समझाते हैं। कोई समाधान वास्तव में 100% संतोषजनक नहीं है। लेकिन मुझे लगता है कि किसी को सिर्फ इसके साथ रहना है, मार्जिन को इस तरह से काम करना चाहिए या टेक्स्ट स्वरूपण असंभव होगा। 99% बार यह आवश्यकतानुसार काम करता है। लेकिन लेआउट डिजाइन करते समय हर बार और फिर समस्या आती है। : पी – jamietelin

अतिप्रवाह: छुपा; मेरे लिए भी काम किया और मेरे परिदृश्य में मेरे लिए बेहतर काम किया। – stuyam

समस्या माता-पिता ऊंचाई के लिए बच्चों को ध्यान में रखते हुए समस्या थी। display:inline-block; जोड़ना मेरे लिए किया था।

पूर्ण सीएसएस

#page { 
    margin:0; 
    background:#FF9; 
    display:inline-block; 
    width:100%; 
}

See Fiddle

स्रोत

2012-11-26 21:51:13 jonBreizh

निम्नलिखित नियमों में से किसी एक जोड़ें:

float: left/right; 
position: absolute; 
display: inline-block; 
overflow: auto/scroll/hidden; 
clear: left/right/both;

यह collapsing margins के कारण होता है। इस व्यवहार here के बारे में एक लेख देखें।

लेख के अनुसार:

W3C विनिर्देशन परिभाषित मार्जिन गिर इस प्रकार है:

"इस विनिर्देश में, अभिव्यक्ति मार्जिन गिर मतलब यह है कि आसपास के मार्जिन (कोई गैर-खाली सामग्री, गद्दी, या सीमावर्ती क्षेत्रों, या निकासी के लिए उन्हें दो या अधिक बक्से (जो एक-दूसरे या नेस्टेड) एक एकल मार्जिन का सम्मिश्रण करने के लिए अगले हो सकता है की अलग करता है)। "

यह भी अभिभावक-बच्चे eleme के लिए सच है एनटीएस।

सभी उत्तरों संभव समाधान में से एक में शामिल हैं:

जहां तत्वों को उनके मार्जिन ढह नहीं अन्य स्थितियों हैं:

बिल्कुल तैनात तत्वों

जारी तत्वों इनलाइन-ब्लॉक तत्व

ओवरफ्लो वाले तत्व दृश्यमान के अलावा किसी अन्य चीज़ पर सेट ई (वे अपने बच्चों के साथ मार्जिन पतन नहीं।)

को मंजूरी दे दी तत्वों (वे अपने माता-पिता ब्लॉक के नीचे मार्जिन के साथ अपने शीर्ष मार्जिन पतन नहीं है।)

मूल तत्व

स्रोत

2017-02-06 14:09:15 Ziarno

सीएसएस मार्जिन आतंक; मार्जिन मूल तत्व के बाहर स्थान जोड़ता है

उत्तर

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