बाल तत्व पर मार्जिन मूल तत्व को स्थानांतरित करता है

Question

मेरे पास एक div( माता-पिता ) है जिसमें दूसरा div( बच्चा ) है। bodyबिना किसी विशेष सीएसएस शैली के साथ अभिभावक पहला तत्व है । जब मैंने सेट किया

.child
{
    margin-top: 10px;
}

अंतिम परिणाम यह है कि मेरे बच्चे का शीर्ष अभी भी माता-पिता के साथ संरेखित है। बच्चे को 10px नीचे की ओर स्थानांतरित करने के बजाय, मेरे माता-पिता 10px नीचे चले जाते हैं।

मेरे DOCTYPEलिए सेट है XHTML Transitional।

मुझे यहां क्या समझ नहीं आ रहा है?

1 संपादित करें
मेरे माता-पिता को कड़ाई से परिभाषित आयामों की आवश्यकता है क्योंकि इसमें एक पृष्ठभूमि है जिसे इसके नीचे से ऊपर (पिक्सेल परिपूर्ण) प्रदर्शित किया जाना है। इसलिए इस पर वर्टिकल मार्जिन सेट करना एक नहीं है ।

संपादन 2
यह व्यवहार FF, IE के साथ-साथ CR पर समान है।

Comments

इस व्यवहार से कोई मतलब नहीं है कि ऐसा क्या है। माता-पिता के अंदर रहने के लिए मार्जिन माना जाता है। माता-पिता की नहीं चलती। ये नियम कौन लिखता है।

— मुहम्मद उमेर

अंतिम टिप्पणी के लिए +2। गंभीरता से यह नियम मुझे परेशान करता है। "हर बार काम करने वाले समय का 60%" - यही मार्जिन है।

— केसी ड्वेन

मैं दो अंतिम टिप्पणीकारों से पूरी तरह सहमत हूं। यह पागल है। क्या दिलचस्प है कि माता-पिता को 1px सीमा जोड़ने से यह सही काम करता है, हालांकि इसका मतलब है कि आपके पास एक सीमा है ... यदि यह अपेक्षित व्यवहार है, तो यह हास्यास्पद है

— erdomester

यह भी मदद मिल सकती है आप :) stackoverflow.com/questions/35337043/...

— Bhojendra Rauniyar

यह मुझे डिफ़ॉल्ट बॉक्स-साइज़िंग नियम की याद दिलाता है: " हमें एक बॉक्स को शिप करने की आवश्यकता है। बॉक्स को 100 सेमी से बड़ा नहीं होना चाहिए। हमें यह सुनिश्चित करने के लिए बॉक्स के अंदर 10 सेमी पैडिंग की आवश्यकता है कि हमारी सामग्री शिपिंग के दौरान टूट न जाए। बॉक्स 120 सेमी! "क्या मज़ाक है।

— नौलोनर

Answer 1

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

.parent { overflow: auto; }

या:

.parent { overflow: hidden; }

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

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

---

लोकप्रिय अनुरोध के अनुसार अपडेट करें: हाशिये के ढहने का पूरा बिंदु पाठ्य सामग्री को संभालना है। उदाहरण के लिए:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

क्योंकि ब्राउज़र हाशिये को ध्वस्त कर देता है, जैसा कि आप अपेक्षा करते हैं, पाठ प्रकट होता है, और <div>आवरण टैग मार्जिन को प्रभावित नहीं करते हैं। प्रत्येक तत्व यह सुनिश्चित करता है कि उसके आस-पास रिक्ति हो, लेकिन रिक्ति दोगुनी नहीं होगी। के हाशिये <h2>और <p>जोड़ नहीं होगा, लेकिन एक दूसरे में स्लाइड (वे पतन)। वही तत्व <p>और <ul>तत्व के लिए होता है ।

अफसोस की बात है, आधुनिक डिजाइनों के साथ यह विचार आपको काट सकता है जब आप स्पष्ट रूप से एक कंटेनर चाहते हैं। इसे सीएसएस बोल में एक नया ब्लॉक स्वरूपण संदर्भ कहा जाता है । overflowया मार्जिन चाल आपको लगता है कि दे देंगे।

Comments

मुझे पता है कि ऐसा क्यों होता है जो किसी के लिए भी अच्छा होता है। यह 'फीचर ’किस स्थिति में था।

— मुहम्मद उमेर

@MuhammadUmer, अच्छी तरह से यह पाठ सामग्री के साथ करना है। उदाहरण के लिए, की एक श्रृंखला <h2>, <p>, <ul>अजीब अंतराल या "डबल" मार्जिन इस तरह से नहीं मिलेगा।

— vdboor

क्या आप कुछ उदाहरण दे सकते हैं। मान लीजिए कि मेरे पास पृष्ठभूमि के रूप में div है। इसमें h1, h2 और p के साथ। अब मैं h1 को थोड़ा नीचे ले जाना चाहता हूँ, इसलिए यह बैकग्राउंड डिव के ऊपर के किनारे के पास नहीं है, फिर भी h1 एलिमेंट का विस्तार नहीं किया। मुझे लगता है कि शीर्ष मार्जिन जोड़ देंगे। जो स्पष्ट है। लेकिन जब मैं ऐसा करता हूं, तो शानदार पृष्ठभूमि इसके साथ नीचे जाने का फैसला करती है। यह कैसा फीचर है। यह h1, h2 और p के बीच अंतर करने में कैसे मदद करता है। मुझे यह देखने में मदद करें कि आप क्या कह रहे हैं।

— मुहम्मद उमेर

मैंने आपके लिए एक उदाहरण जोड़ा है

— vdboor

मुझे उम्मीद है कि इसे और अधिक मार्जिन में जोड़ा जाएगा। मेरे विकास करियर में सबसे अधिक कष्टप्रद बात है हाशिए का पतन। अगर मैं margin: 5px 10px;id के साथ एक दूसरे के बगल में 2 divs लगाता हूँ, तो ऊपर से 2 divs 5 px और उनके बीच में 20 px नहीं, ऊपर से 5 px और उनके बीच 10px। अगर मैं चाहता था कि उनके बीच 10 px आईडी निर्दिष्ट हो margin: 5px 5px;। मैं ईमानदारी से चाहता हूं कि एक रूट नियम था जो मैं जगह पा सकता था जो सभी मार्जिन को रोक देगा। मुझे नफरत है कि मुझे कागज पर हाशिये के आकार को दोगुना करना है ताकि उन्हें वास्तव में वही किया जा सके जो मैं स्क्रीन पर चाहता हूं। और यह शीर्ष बात ... क्या एक आपदा

— जेएल ग्रिफिन

Answer 2

यह सामान्य व्यवहार है (कम से कम ब्राउज़र कार्यान्वयन के बीच)। मार्जिन अपने माता-पिता के संबंध में बच्चे की स्थिति को प्रभावित नहीं करता है, जब तक कि माता-पिता के पास गद्दी न हो, उस स्थिति में अधिकांश ब्राउज़र तब बच्चे के मार्जिन को माता-पिता की गद्दी में जोड़ देंगे।

आप जो व्यवहार चाहते हैं, उसे पाने के लिए आपको चाहिए:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Comments

माता-पिता के लिए सीमा को जोड़ने से बच्चे के मार्जिन पर भी असर पड़ेगा, कोशिश करें.parent {border: solid 1px;}

— ओके करें

मार्जिन पैडिंग में नहीं जुड़ता है ... यह अलग से लागू होता है। लेकिन दृश्य प्रभाव समान है।

— ब्रिलियनड

क्या होगा अगर आप एक टॉप-मार्जिन चाहते हैं…? वास्तव में समाधान नहीं है।

— त्येला

जैसे कि फीसेला ने कहा - यह वास्तव में एक समाधान नहीं है यदि शीर्ष मार्जिन की आवश्यकता है। vdboor का जवाब बेहतर है।

— जॉय मोरानी

समाधानों का गुच्छा है, आपको बस पर्याप्त रचनात्मक होने की आवश्यकता है। चीयर्स। :-)

— स्लाव मेल्टसर

Answer 3

हालाँकि सभी उत्तर समस्या को ठीक कर देते हैं लेकिन वे ट्रेड-ऑफ / समायोजन / समझौता जैसे आते हैं

• floats, आप है तत्व फ्लोट करने के लिए
• border-top, यह माता-पिता को कम से कम 1px नीचे की ओर धकेलता है, जिसे तब -1pxमूल तत्व के लिए मार्जिन शुरू करने के साथ समायोजित किया जाना चाहिए । यह समस्या पैदा कर सकता है जब माता-पिता पहले से ही margin-topरिश्तेदार इकाइयों में हैं।
• padding-top, उपयोग के रूप में एक ही प्रभाव border-top
• overflow: hidden, का उपयोग नहीं किया जा सकता है जब माता-पिता को ड्रॉप डाउन मेनू की तरह अतिप्रवाह सामग्री प्रदर्शित करनी चाहिए
• overflow: auto(मूल रूप से) अतिप्रवाह सामग्री (जैसे छाया या टूल टिप के त्रिकोण) में मूल तत्व के लिए स्क्रॉलबार का परिचय

इस समस्या को CSS3 के छद्म तत्वों का उपयोग करके हल किया जा सकता है

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

Comments

margin-top: -1pxअनावश्यक लगता है। लेकिन मुझे यह पसंद है।

— फ्लिकेम

वास्तव में, दोनों margin-top: -1pxऔर height: 0अनावश्यक लगता है। क्रोम में परीक्षण किया गया। लेकिन सबसे अच्छा समाधान।

— निंजाफार्ट

यह विधि ज्यादातर काम करती है, लेकिन कंटेनर के भीतर अंतिम तत्व के लिए नीचे के मार्जिन का सम्मान नहीं करेगी। यह अतिप्रवाह के लिए एक समान फिक्स नहीं है: छिपा हुआ; उदाहरण के लिए।

— माइकल जियोवानी पुमो

@MichaelGiovanniPumo उत्तर का उपयोग करके अंतिम तत्व के निचले मार्जिन के साथ काम करने के लिए संशोधित किया जा सकता है.parent:after...

— एजाज़

यह आजकल निश्चित रूप से सही उत्तर है। त्रुटिपूर्ण रूप से काम करता है (इसे बाद और पहले दोनों पर डालें), मुझे आशा है कि लोग अन्य लोगों के अतीत को स्क्रॉल करने की हिम्मत करेंगे!

— fgblomqvist 13

Answer 4

display:inline-blockबाल तत्व में शैली जोड़ें

Answer 5

मूल तत्व को कम से कम  बाल तत्व के सामने नहीं रखना है।

Comments

हां, कभी-कभी केवल यह मदद कर सकता है ... या बेहतर कुछ इस तरह से डाल सकता है: <div style = 'चौड़ाई: 0; ऊंचाई: 0>> & nbsp; </ div>

— पिगलेव पावेल;

Answer 6

इसी से मेरा काम बना है

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Answer 7

मुझे पता चला है कि, आपके .css के अंदर> यदि आप एक div एलिमेंट की डिस्प्ले प्रॉपर्टी को इनलाइन-ब्लॉक में सेट करते हैं तो यह समस्या को ठीक करता है। और मार्जिन उम्मीद के मुताबिक काम करेगा।

Answer 8

नीट सीएसएस-केवल समाधान

निम्नलिखित कोड का उपयोग अनैतिक रूप से आगे बढ़ने वाले डिव के लिए सामग्रीविहीन पहले-बच्चे को प्रस्तुत करने के लिए करें:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

इस पद्धति का लाभ यह है कि आपको किसी भी मौजूदा तत्व के सीएसएस को बदलने की आवश्यकता नहीं है, और इसलिए डिजाइन पर न्यूनतम प्रभाव पड़ता है। इस के आगे, तत्व यह है कि जोड़ा जाता है एक छद्म तत्व है, जो है नहीं डोम पेड़ में।

छद्म तत्वों का समर्थन व्यापक है: फ़ायरफ़ॉक्स 3+, सफारी 3+, क्रोम 3+, ओपेरा 10+, और IE 8+। यह किसी भी आधुनिक ब्राउज़र में काम करेगा (नए के साथ सावधान रहें ::before, जो IE8 में समर्थित नहीं है)।

प्रसंग

यदि किसी तत्व का पहला बच्चा है margin-top, तो अभिभावक निरर्थक मार्जिन को ढहाने के तरीके के रूप में अपनी स्थिति को समायोजित करेगा। क्यों? यह ऐसा ही है।

निम्नलिखित समस्या को देखते हुए:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

आप सामग्री के साथ एक बच्चे को जोड़कर इसे ठीक कर सकते हैं, जैसे कि एक साधारण स्थान। लेकिन हम सभी के लिए रिक्त स्थान जोड़ने से नफरत करते हैं, जो केवल एक डिजाइन का मुद्दा है। इसलिए, white-spaceसंपत्ति का उपयोग नकली सामग्री के लिए करें।

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

जहां position: relative;फिक्स की सही स्थिति सुनिश्चित करता है। और white-space: pre;आपको किसी भी सामग्री को जोड़ने की आवश्यकता नहीं है - एक सफेद स्थान की तरह - ठीक करने के लिए। और height: 0px;width: 0px;overflow: hidden;यह सुनिश्चित करता है कि आप कभी भी फिक्स नहीं देखेंगे।

आपको प्राचीन IE ब्राउज़रों में वास्तव में शून्य को जोड़ने line-height: 0px;या max-height: 0px;सुनिश्चित करने की आवश्यकता हो सकती है (मैं अनिश्चित हूँ)। और वैकल्पिक रूप से आप <!--dummy-->इसे पुराने IE ब्राउज़र में जोड़ सकते हैं , अगर यह काम नहीं करता है।

संक्षेप में, आप यह सब केवल सीएसएस के साथ कर सकते हैं (जो HTML डोम-ट्री में एक वास्तविक बच्चे को जोड़ने की आवश्यकता को हटा देता है):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Comments

यदि आप हताश हैं, तो केवल इस समाधान का उपयोग करें, और आप मौजूदा तत्वों के लिए कोई कस्टम सीएसएस सेट नहीं कर सकते - अन्यथा वास्तविक समाधान का उपयोग करें: overflow: hidden;माता-पिता के लिए सेट करें।

— यति

Answer 9

"डिव पेरेंट" को रोकने के लिए "डिव चाइल्ड" के मार्जिन का उपयोग करें:
पेरेंट में इन सीएसएस का उपयोग करें:

• फ्लोट
• गद्दी
• सीमा
• बाढ़

Answer 10

marginतत्वों के भीतर निहित .childगिर रहे हैं।

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

इस उदाहरण में, ब्राउज़र डिफ़ॉल्ट शैलियों से pप्राप्त marginकर रहा है। ब्राउज़र डिफ़ॉल्ट font-sizeआमतौर पर 16px है। आप margin-topपर 16px से अधिक होने से #childआप यह देख सकते हैं कि यह स्थिति की चाल है।

Answer 11

मुझे यह समस्या भी थी लेकिन नकारात्मक मार्जिन हैक को रोकने के लिए पसंद किया, इसलिए मैंने एक डाल दिया

<div class="supercontainer"></div>

इसके चारों ओर जो मार्जिन के बजाय पैडिंग है। निश्चित रूप से इसका अर्थ अधिक दिव्यांगता है, लेकिन यह संभवतः इसे ठीक से करने का सबसे साफ तरीका है।

Answer 12

दिलचस्प है कि इस समस्या का मेरा पसंदीदा समाधान अभी तक यहाँ उल्लेख नहीं किया गया है: फ़्लोट्स का उपयोग करना।

एचटीएमएल:

<div class="parent">
    <div class="child"></div>
</div>

सीएसएस:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

इसे यहां देखें: http://codepen.io/anon/pen/Iphol

नोट मामले में आप माता-पिता पर गतिशील ऊंचाई की जरूरत है, यह भी फ्लोट करने के लिए है, इसलिए बस की जगह height:100px;सेfloat:left;

Answer 13

एक वैकल्पिक समाधान जो मैंने पाया इससे पहले कि मुझे पता था कि सही उत्तर मूल तत्व में एक पारदर्शी सीमा जोड़ना है ।

हालांकि आपका बॉक्स अतिरिक्त पिक्सेल का उपयोग करेगा ...

.parent {
    border:1px solid transparent;
}

Answer 14

के topबजाय का उपयोग करना margin-topएक और संभव समाधान है, यदि उपयुक्त हो।