यह सीएसएस मार्जिन-टॉप स्टाइल काम क्यों नहीं करता है?

Question

मैं एक div के अंदर एक div पर मार्जिन मान जोड़ने की कोशिश करता हूं। शीर्ष मान को छोड़कर सभी ठीक काम करता है, इसे नजरअंदाज किया जाता है। लेकिन क्यों?

जैसा मैं सोचा था:

जो मैं समझता हूं:

कोड:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools का कोई स्पष्टीकरण नहीं है कि मार्जिन इस तरह क्यों व्यवहार करता है।

Comments

क्या तुमने भीतर तैरने की कोशिश की?

— मुर्गा

हम .. इसके साथ float:left;काम करता है ... लेकिन इसकी आवश्यकता क्यों है। मैं नहीं चाहता कि यह तैरता रहे। और बाएं / दाएं काम के लिए मार्जिन क्यों है?

— जेमिथेलिन

CSS मार्जिन पतन एल्गोरिथम की मजेदार दुनिया में आपका स्वागत है!

— गॉर्डन

W3Schools बनाम W3CDocs ... मुझे लगता है कि हमारे पास एक विजेता है। : डी

— एंडरस्किल

jsFiddle, अगले आदमी को बचाने के लिए 25 सेकंड jsfiddle.net/kLeu9

— CodyBugstein

Answer 1

आप वास्तव में के शीर्ष मार्जिन को देख रहे हैं #innerतत्व पतन के शीर्ष बढ़त में #outer, तत्व केवल छोड़ने #outerमार्जिन बरकरार (यद्यपि नहीं आपकी छवियों में दिखाया गया है)। दोनों बक्से के ऊपरी किनारे एक दूसरे के खिलाफ फ्लश हैं क्योंकि उनके मार्जिन समान हैं।

यहाँ W3C कल्पना से प्रासंगिक बिंदु हैं:

8.3.1 हाशिए पर पहुंचना

CSS में, दो या अधिक बक्सों के समीपवर्ती हाशिये (जो भाई-बहन नहीं भी हो सकते हैं) एकल मार्जिन बनाने के लिए गठबंधन कर सकते हैं। इस तरह से गठबंधन करने वाले मार्जिन को ढहने के लिए कहा जाता है , और परिणामी संयुक्त मार्जिन को ढह गए मार्जिन कहा जाता है ।

समीपवर्ती ऊर्ध्वाधर मार्जिन के पतन […]

दो मार्जिन समीप हैं यदि और केवल यदि:

• दोनों इन-फ्लो ब्लॉक-स्तरीय बॉक्स से संबंधित हैं जो एक ही ब्लॉक फॉर्मेटिंग संदर्भ में भाग लेते हैं
• कोई लाइन बॉक्स, कोई निकासी, कोई पैडिंग और कोई सीमा उन्हें अलग नहीं करती
• दोनों लंबवत-आसन्न बॉक्स किनारों से संबंधित हैं, अर्थात निम्न जोड़े में से एक बनाएं:
  • एक बॉक्स के शीर्ष मार्जिन और इसके पहले-प्रवाह बच्चे के शीर्ष मार्जिन

मार्जिन को गिरने से रोकने के लिए आप निम्नलिखित में से कोई भी कर सकते हैं:

• अपने किसी भी divतत्व को तैरने दें
• अपने divतत्वों को इनलाइन ब्लॉक करें
• सेट overflowकी #outerकरने के लिएauto (या किसी भी मूल्य के अलावा अन्य visible)

उपरोक्त विकल्प मार्जिन को टकराने से रोकते हैं क्योंकि:

• फ्लोट किए गए बॉक्स और किसी अन्य बॉक्स के बीच का मार्जिन नहीं गिरता है (फ्लोट और उसके इन-फ्लो बच्चों के बीच भी नहीं)।
• नए ब्लॉक फॉरमेटिंग कॉन्टेक्ट्स (जैसे कि फ्लोट्स और 'दिखाई' के अलावा 'के साथ एलिमेंट) स्थापित करने वाले तत्वों के मार्जिन उनके इन-फ्लो बच्चों के साथ नहीं गिरते हैं।
• इनलाइन-ब्लॉक बॉक्स के मार्जिन गिरते नहीं हैं (उनके प्रवाह वाले बच्चों के साथ भी नहीं)।

बाएं और दाएं मार्जिन जैसा आप उम्मीद करते हैं वैसा ही व्यवहार करें:

क्षैतिज मार्जिन कभी नहीं गिरता है।

Comments

जाहिरा तौर पर, आप यह सोचने के लिए अकेले नहीं हैं कि यह बेवकूफ है ...

— बोल्ट

यह जवाब चट्टानों! बस कुछ जोड़ना है। W3c का आपका उद्धरण यह कहता है लेकिन मुझे केवल अब एहसास हुआ है। तो बस दूसरों के लिए स्पष्ट होने के लिए आप # रूटर को एक सीमा भी दे सकते हैं।

— driechel

फ़्लोटिंग में लिंक टूटी हुई लगती है।

— ईपी

@episanty: जब आप किसी टिप्पणी से लिंक करते हैं तो यही होता है। अनलिंक किया गया।

— BoltClock

मुझे पता है - बस आपको बता देना चाहता था। जब से आप you're -nabled हो गए हैं मुझे लगा कि आप टिप्पणी को फिर से जीवित करना चाहते हैं - या अपनी पोस्ट को तदनुसार बदल सकते हैं। अच्छे उत्तर के लिए धन्यवाद, वैसे।

— ईपी

Answer 2

display: inline-block;आंतरिक div पर उपयोग करने का प्रयास करें ।

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Comments

अच्छा उत्तर। बेहतर होगा यदि यह समझाया जाए कि यह परिवर्तन समस्या को ठीक क्यों करता है।

— JohnFx

ठीक है, वह अजीब है! वह काम क्यों करता है? यह तार्किक व्याख्या क्या है क्योंकि यह काम नहीं करता है क्योंकि कोई अपेक्षा नहीं करेगा। मार्जिन बाएं / दाएं बिना काम करता है display:inline-block;। उपयोग करते समय वापस सेट करें display:inline-block;कि आप div पर 100% की चौड़ाई खो देते हैं।

— १२:२५ बजे जामिटेलिन

इसे इनलाइन-ब्लॉक में बदलना ब्राउज़र को उसके रखे जाने और अन्य नियमों को लागू करने के बाद div के आकार का पुनर्मूल्यांकन करने के लिए मजबूर करता है।

— मुर्गा

मेरी समस्या के लिए कोशिश की, एक सीढ़ी प्रभाव बनाया।

— जॉनी

display:inline-blockमेरे लिए काम किया। बहुत बहुत धन्यवाद।

— स्टारकिड

Answer 3

क्या @BoltClock का उल्लेख किया है बहुत ठोस हैं। और यहाँ मैं सिर्फ इस समस्या के लिए कई और समाधान जोड़ना चाहता हूं। इस w3c_collapsing मार्जिन की जाँच करें । हरे रंग के हिस्से संभावित विचार हैं कि इस समस्या को कैसे हल किया जा सकता है।

समाधान 1

फ्लोट किए गए बॉक्स और किसी अन्य बॉक्स के बीच का मार्जिन नहीं गिरता है (फ्लोट और उसके इन-फ्लो बच्चों के बीच भी नहीं)।

इसका मतलब है कि मैं या float:leftतो जोड़ सकते हैं #outerया#inner demo1 ।

यह भी देखें कि floatauto मार्जिन में अमान्य होगा ।

समाधान २

नए ब्लॉक फॉरमेटिंग कॉन्टेक्ट्स (जैसे कि फ्लोट्स और 'दिखाई' के अलावा 'के साथ एलिमेंट) स्थापित करने वाले तत्वों के मार्जिन उनके इन-फ्लो बच्चों के साथ नहीं गिरते हैं।

के अलावा visible, चलो में डाल overflow: hiddenदिया #outer। और इस तरह से बहुत सरल और सभ्य लगता है। मुझें यह पसंद है।

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

समाधान 3

बिल्कुल तैनात बक्सों का मार्जिन गिरता नहीं है (अपने इन-फ्लो बच्चों के साथ भी नहीं)।

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

या

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

इन दो तरीकों के सामान्य प्रवाह को तोड़ देगा div

समाधान ४

इनलाइन-ब्लॉक बॉक्स के मार्जिन गिरते नहीं हैं (उनके प्रवाह वाले बच्चों के साथ भी नहीं)।

@enderskill जैसा ही है

समाधान 5

एक इन-फ्लो ब्लॉक-स्तरीय तत्व का निचला मार्जिन हमेशा अपने अगले इन-फ्लो ब्लॉक-स्तरीय सिबलिंग के शीर्ष मार्जिन के साथ गिरता है, जब तक कि भाई-बहन के पास मंजूरी न हो।

इस सवाल के साथ काम करने के लिए बहुत कुछ नहीं है क्योंकि यह भाई-बहन के बीच का मामूली अंतर है। आम तौर पर इसका मतलब है कि अगर एक टॉप-बॉक्स है margin-bottom: 30pxऔर एक सिबलिंग-बॉक्स है margin-top: 10px। उनके बीच कुल मार्जिन 30pxइसके बजाय है 40px।

समाधान 6

एक इन-फ्लो ब्लॉक एलिमेंट का टॉप मार्जिन उसके पहले इन-फ्लो ब्लॉक-लेवल बच्चे के टॉप मार्जिन के साथ गिर जाता है अगर एलिमेंट में कोई टॉप बॉर्डर, कोई टॉप पैडिंग नहीं है, और बच्चे के पास कोई क्लीयरेंस नहीं है।

यह बहुत दिलचस्प है और मैं सिर्फ एक शीर्ष सीमा रेखा जोड़ सकता हूं

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

और इसके अलावा <div>डिफ़ॉल्ट रूप से ब्लॉक-स्तर है, इसलिए आपको इसे उद्देश्य से घोषित करने की आवश्यकता नहीं है। मेरी नौसिखिया प्रतिष्ठा के कारण 2 से अधिक लिंक और चित्र पोस्ट नहीं कर पाने के लिए क्षमा करें। कम से कम आप जानते हैं कि समस्या अगली बार आपको कुछ समान दिखाई देती है।

Answer 4

निश्चित नहीं है कि आपके पास क्या काम नहीं है, लेकिन आप जोड़ सकते हैं

overflow: auto;

बाहरी div को।

Comments

इस समस्या के विभिन्न समाधानों का भार। धन्यवाद! @ BoltClock Bols के उत्तर के साथ संयुक्त यह उत्तर इस बात की अच्छी जानकारी प्रदान करता है कि यह समाधान काम क्यों करता है।

— जेमिथेलिन

Answer 5

यदि आप किसी भी तरह से पैडिंग जोड़ते हैं #outer, तो यह काम करता है।

डेमो

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

Answer 6

निश्चित रूप से क्यों नहीं, लेकिन आंतरिक सीएसएस को बदलना

display:inline-block;

काम करने लगता है;

Answer 7

"क्यों" का उत्तर नहीं देता है (कुछ w / समतुल्य मार्जिन होना चाहिए), लेकिन ऐसा लगता है कि आप जो करने की कोशिश कर रहे हैं वह करने के लिए सबसे आसान / सबसे तार्किक तरीका है, बस बाहरी div में जोड़ना होगाpadding-top :

http://jsfiddle.net/hpU5d/1/

माइनर नोट - display:block;जब तक आपके कोड में कुछ और नहीं हो, तब तक इसे ब्लॉक नहीं होने देने के लिए एक div सेट करना आवश्यक नहीं होना चाहिए ।

Answer 8

इसे इस्तेमाल करे:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

सौभाग्य

Answer 9

मुझे लगता है कि रिश्तेदार को #in div की स्थिति संपत्ति सेट करने से भी प्रभाव प्राप्त करने में मदद मिल सकती है। लेकिन फिर भी, मैंने IE9 और नवीनतम Google Chrome के प्रश्न में मूल कोड को आजमाया और वे पहले से ही बिना किसी संशोधन के वांछनीय प्रभाव दे रहे थे।

Answer 10

padding-top:50pxबाहरी div के लिए उपयोग करें । कुछ इस तरह:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

नोट: पैडिंग आपके div के आकार को बढ़ाएगा। इस मामले में यदि आपके डिव का आकार महत्वपूर्ण है, तो मेरा मतलब है कि यदि यह एक विशिष्ट ऊंचाई होना चाहिए। ऊंचाई को 50px कम करें:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Answer 11

क्या आपने पहले प्रयास किया है?

margin:50px 50px 50px 50px !important;

Answer 12

बस जल्दी ठीक करने के लिए, अपने बाल तत्वों को divइस तरह से एक तत्व में लपेटने का प्रयास करें -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

बीच-बीच में और div innerकी गद्दी के कारण div के मार्जिन में गिरावट नहीं होगी । तो तार्किक रूप से आपके पास div के मौजूदा मार्जिन के साथ अतिरिक्त जगह होगी ।1pxouterinner1pxinner