मार्जिन-टॉप धक्का बाहरी div नीचे

Question

मेरे रैपर div में पहले तत्व के रूप में हेडर डिव है, लेकिन जब मैं हेडर डिव के अंदर एक एच 1 में शीर्ष मार्जिन जोड़ता हूं तो यह पूरे हेडर को डाउन करता है। मुझे एहसास होता है कि जब भी मैं किसी पृष्ठ पर पहले दिखाई देने वाले तत्व के लिए एक शीर्ष मार्जिन लागू करता हूं।

यहाँ एक नमूना कोड स्निपेट है। धन्यवाद!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

Answer 1

overflow:autoमाता-पिता में डाल div
इस लिंक में अधिक देखें

Comments

overflow:hidden90% मामलों के लिए बेहतर है।

— विस्कॉन्सिन

अतिप्रवाह क्यों होगा: छिपा हुआ बेहतर होगा?

— पीटरसन

@peterchon - क्योंकि ऑटो स्क्रॉलबार्स का कारण बन सकता है

— vsync

अब और काम नहीं करता, इस लिंक में @ SW4 का जवाब बेहतर है

— am05mhz

overflow: hiddenया overflow: autoअवांछित दुष्प्रभाव पैदा कर सकते हैं, जिनमें से कुछ आप पहली नजर में नहीं देख सकते हैं। मैंने पाया कि बदलते marginकरने के लिए paddingकाम कर देता है, जवाब के रूप में नीचे चलता है। फिर भी समझ में नहीं आता है कि पूरी समस्या क्यों होती है, हालांकि।

— गिलाद बारनर

Answer 2

मैं क्यों ऐसा होता है पर एक ठोस स्पष्टीकरण की जरूरत नहीं है, लेकिन मैं बदल कर इस ठीक करने के बाद top-marginकरने के लिए top-padding, या जोड़ने display: inline-blockतत्व शैली के लिए।

EDIT: यह मेरा सिद्धांत है

मुझे लगता है कि हाशिये ढह गए (संयुक्त) के साथ यह करने के लिए कुछ है।

से W3C गिर मार्जिन :

इस विनिर्देशन में, हाशिये के ढहने का अर्थ है कि दो या अधिक बक्सों (जो एक दूसरे या नेस्टेड के बगल में हो सकते हैं) के समीपवर्ती मार्जिन (कोई गैर-रिक्त सामग्री, पैडिंग या बॉर्डर एरिया या क्लियरेंस अलग) एक एकल मार्जिन बनाने के लिए गठबंधन नहीं करते हैं। ।

मेरा सिद्धांत यह है कि चूँकि आपका पहला तत्व शरीर के बगल में है, दोनों हाशिये संयुक्त हैं और शरीर पर लागू होते हैं: यह शरीर की सामग्री को बॉक्स मॉडल के अनुपालन में लागू किए गए ढहने वाले मार्जिन से नीचे शुरू करने के लिए मजबूर करता है ।

ऐसी परिस्थितियाँ हैं जहाँ मार्जिन नहीं गिरता है जो ( कोलैप्सिंग मार्जिन से ) के साथ खेलने लायक हो सकते हैं :

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Comments

इसके अलावा, ध्वस्त मार्जिन (आंतरिक एक) के साथ तत्व पर पैडिंग या बॉर्डर इसे अन-पतन करेगा।

— अनाम

यह मेरे लिए काम करता है - मेरे कंटेनर में पूर्ण तत्व (एक ड्रॉप-डाउन) था, इसलिए अतिप्रवाह: ऑटो काम नहीं करता था।

— mwilcox

Answer 3

यह माता-पिता-बाल तत्वों के बीच मार्जिन के टकराने से बचने के कुछ तरीके हैं। अपने स्टाइल के बाकी हिस्सों के साथ बेहतर फिट बैठता है का उपयोग करें:

• के displayअलावा अन्य के लिए सेट करें block।
• के floatअलावा अन्य के लिए सेट करें none।
• मार्जिन निकालें, और इसके बजाय उपयोग करें padding। उदाहरण के लिए यदि आपके पास था margin-top: 10px, के साथ बदलें padding-top: 10px;।
• मार्जिन निकालें, और बजाय का उपयोग position( absoluteया relativeविशेषताओं के साथ) top, bottomआदि उदाहरण के लिए यदि आप था margin-top: 10px, के साथ बदलें position: relative; top: 10px;।
• उस पक्ष में एक paddingया एक जोड़ें borderजहां हाशिये ढह रहे हैं, मूल तत्व तक। बॉर्डर 1px और पारदर्शी हो सकता है।
• सेट overflowके अलावा अन्य करने के लिए visibleकरने के लिए माता पिता के तत्व।

Answer 4

मुझे पता है कि यह एक पुराना मुद्दा है, मैं इसके बारे में कई बार आया हूं। समस्या यह है कि यहां सभी फ़िक्सेस हैक हैं जो संभावित रूप से अनपेक्षित परिणाम होंगे।

सबसे पहले, रूट समस्या के लिए एक आसान स्पष्टीकरण है। इस तरह से कि मार्जिन ढहने का काम करता है, अगर कंटेनर के अंदर पहले तत्व में शीर्ष मार्जिन है, तो शीर्ष मार्जिन प्रभावी रूप से मूल कंटेनर में ही लागू होता है। आप निम्न कार्य करके इसे स्वयं परख सकते हैं:

<div>
    <h1>Test</h1>
</div>

डिबगर में, इसे खोलें और div को घुमाएं। आप देखेंगे कि div वास्तव में रखा गया है जहां H1 तत्व का शीर्ष-मार्जिन बंद हो जाता है । यह व्यवहार ब्राउज़र द्वारा किया जाता है।

तो अजीब हैक्स का सहारा लिए बिना इसका एक आसान निर्धारण है, जैसा कि यहां की अधिकांश पोस्टें करती हैं (कोई अपमान नहीं करना चाहिए, इसका सत्य है) - बस मूल स्पष्टीकरण पर वापस जाएं - ...if the first element inside a container has a top margin...- इसके बाद, आपको इसकी आवश्यकता होगी कंटेनर में पहला तत्व शीर्ष मार्जिन नहीं है। ठीक है, लेकिन आप उन तत्वों को जोड़े बिना कैसे करते हैं जो आपके दस्तावेज़ के साथ शब्दार्थ में हस्तक्षेप नहीं करते हैं?

आसान! छद्म तत्वों! आप इसे कक्षा या पूर्व-निर्धारित मिश्रण के माध्यम से कर सकते हैं। एक :beforeछद्म तत्व जोड़ें :

सीएसएस एक वर्ग के माध्यम से:

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

इसके साथ, ऊपर दिए गए मार्कअप उदाहरण के बाद आप अपनी div को इस तरह संशोधित करेंगे:

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

यह काम क्यों करता है?

कंटेनर में पहला तत्व, यदि इसका कोई शीर्ष-मार्जिन नहीं है, तो अगले तत्व के शीर्ष मार्जिन की शुरुआत की स्थिति निर्धारित करता है। एक :beforeछद्म तत्व जोड़कर , ब्राउज़र वास्तव में आपके पहले तत्व से पहले मूल कंटेनर में एक गैर-शब्दार्थ (दूसरे शब्दों में, एसईओ के लिए अच्छा) तत्व जोड़ता है ।

Q. ऊंचाई क्यों: .0000001em?

A. तत्व तत्व को नीचे धकेलने के लिए ब्राउज़र के लिए एक ऊंचाई आवश्यक है। यह ऊंचाई प्रभावी रूप से शून्य है, लेकिन यह अभी भी आपको मूल कंटेनर में पैडिंग जोड़ने की अनुमति देगा। चूंकि यह प्रभावी रूप से शून्य है, इसलिए कंटेनर के लेआउट पर इसका कोई प्रभाव नहीं पड़ेगा। सुंदर।

अब आप इस समस्या को ठीक करने के लिए SASS / LESS, एक मिश्रण में एक वर्ग (या बेहतर, एक मिक्सिन!) जोड़ सकते हैं, इसके बजाय अजीब प्रदर्शन शैलियों को जोड़ते हैं जो अप्रत्याशित परिणाम का कारण बनेंगे जब आप अपने तत्वों के साथ अन्य चीजों को करना चाहते हैं, तत्वों पर हाशिये को समाप्त करना। और / या इसे पैडिंग, या अजीब स्थिति / फ्लोट शैलियों के साथ बदल रहा है जो वास्तव में इस मुद्दे को हल करने का इरादा नहीं है।

Comments

.0000001 अपने IE को तोड़ने पर IE11 में वास्तव में शून्य हो जाता है। जब मैं इसे .01em में बदलता हूं तो यह काम करता है।

— एगर

मुझे लगता है कि .01em अभी भी प्रभावी रूप से शून्य होने के लिए पर्याप्त होगा। अच्छी बात। उल्टा, अब जब यह 2018 है, तो हम में से बहुत जल्द IE11 के लिए समर्थन छोड़ दिया जाएगा, विशेष रूप से हाल ही में घोषणा के साथ कि एमएस फिर से एक नए ब्राउज़र का निर्माण करेगा (इस समय को छोड़कर, क्रोमियम पर आधारित है, जिसका अर्थ है - सैद्धांतिक रूप से - पूरी तरह से चूसना नहीं होगा)। : D

— ड्यूडवाड

Answer 5

display: flexइस मामले में काम करेंगे। मूल तत्व दें display: flex;और फिर h1टैग को अपनी आवश्यकता के अनुसार मार्जिन दें ।

Answer 6

आज इस मुद्दे में दौड़ें।

overflow: hidden जब मैंने अधिक तत्वों का पालन किया था, तो उम्मीद के मुताबिक काम नहीं किया।

इसलिए मैंने पैरेंट डिव की डिस्प्ले प्रॉपर्टी को बदलने की कोशिश की और display: flexकाम किया !!!

आशा है कि यह किसी की मदद कर सकता है। :)

Answer 7

मूल तत्व शीर्ष में पैडिंग का एक छोटा सा हिस्सा जोड़ना इस समस्या को ठीक कर सकता है।

.parent{
  padding-top: 0.01em;
}

यह उपयोगी है अगर आपको मूल तत्व के बाहर दिखने के लिए माता-पिता के अंदर एक तत्व की आवश्यकता है, जैसे कि आप एक अतिव्यापी प्रभाव पैदा कर रहे हैं।

Answer 8

मार्जिन में गिरावट के कारण ऐसा होता है। जब बाल तत्व मूल तत्व की सीमा को छूता है और उनमें से कोई भी हाशिये पर लागू होता है:

1. जो मार्जिन सबसे बड़ा होगा वह जीतेगा (लागू)।

2. यदि उनमें से किसी के पास मार्जिन है तो दोनों समान साझा करेंगे।

समाधान

1. माता-पिता के लिए सीमा लागू करें जो माता-पिता और बच्चे को अलग करती है।
2. माता-पिता को पैडिंग लागू करें जो माता-पिता और बच्चे को अलग करता है।
3. माता-पिता पर दिखाई देने के बजाय अतिप्रवाह लागू करें।
4. पैरेंट डिव में वर्चुअल एलिमेंट बनाने से पहले या बाद में उपयोग करें जो कि अलग-अलग लागू बच्चे और माता-पिता के बीच अंतर कर सकता है।
5. मार्जिन एप्लाइड बच्चे और माता-पिता के बीच एक एचटीएमएल तत्व बनाएं और उन्हें अलग भी कर सकते हैं।