मार्जिन-टॉप पुश बाहरी div

Question

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

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

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

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

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

Answer 1

माता-पिता में overflow:auto डाल div
see more in this link

Answer 2

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

संपादित करें: यह मेरा सिद्धांत

मैं एक महसूस कर रही है कि यह कैसे मार्जिन ढह रहे हैं (संयुक्त) के साथ कुछ किया है।

W3C Collapsing Margins से

:

इस विनिर्देश में, अभिव्यक्ति गिर मार्जिन का मतलब है कि आसपास के मार्जिन दो या अधिक की (कोई गैर-खाली सामग्री, गद्दी या सीमावर्ती क्षेत्रों या निकासी उन्हें अलग) बक्से (जो एक के बगल में हो सकता है, दूसरा या घोंसला) एकल मार्जिन बनाने के लिए गठबंधन करें। इस बलों शरीर की सामग्री नीचे लागू किया box model के अनुपालन में मार्जिन ढह शुरू करने के लिए:

मेरे सिद्धांत यह है कि के बाद से अपना पहला तत्व शरीर दो मार्जिन गठबंधन और शरीर पर लागू होते हैं के बगल में है।

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

* 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 

Answer 3

इस में से कुछ हैं अभिभावक-बाल तत्वों के बीच मार्जिन ढहने से बचने के तरीके। block के अलावा अन्य करने के लिए

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

Answer 4

आज इस समस्या में भाग लें।

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

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

उम्मीद है कि यह किसी की मदद कर सकता है। :)

Answer 5

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

.parent{ 
 
    padding-top: 0.01em; 
 
}

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

Answer 6

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

Answer 7

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

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

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

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

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

आसान! छद्म तत्वों! आप इसे कक्षा या पूर्व परिभाषित मिश्रण के माध्यम से कर सकते हैं।इस के साथ

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

, ऊपर मार्कअप उदाहरण आप इस तरह के रूप में अपने div को संशोधित करेगा निम्नलिखित: एक वर्ग के माध्यम से

सीएसएस: एक :before छद्म तत्व जोड़ें

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

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

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

प्रश्न: ऊंचाई: .0000001em क्यों?

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

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