मार्जिन-कॉलिंग को अक्षम कैसे करें?

Question

क्या मार्जिन को पूरी तरह से निष्क्रिय करने का एक तरीका है? एकमात्र समाधान जो मैंने पाया है ("अनसॉलैपिंग" के नाम से) 1px सीमा या 1 पीएक्स पैडिंग का उपयोग करके प्रवेश करता है। मुझे यह अस्वीकार्य लगता है: बाहरी पिक्सेल बिना किसी अच्छे कारण के गणना को जटिल बनाता है। क्या इस मार्जिन-पतन को अक्षम करने का एक अधिक उचित तरीका है?

Comments

फ्लेक्स या ग्रिड लेआउट का उपयोग करें, जहां मार्जिन टकराना मौजूद नहीं है: stackoverflow.com/a/46496701/3597276

— माइकल बेंजामिन

बस तत्वों को एक मान margin-bottomदें , लेकिन margin-top0.

— Dan Bray

मैंने गणना को आसान बनाने के लिए एक पैकेज बनाया: npmjs.com/package/collapsed-margin

— Owen M

Answer 1

मार्जिन पतन के दो मुख्य प्रकार हैं:

• आसन्न तत्वों के बीच हाशिए का पतन
• माता-पिता और बच्चे के तत्वों के बीच हाशिए का पतन

पैडिंग या बॉर्डर का उपयोग केवल बाद के मामले में पतन को रोक देगा। इसके अलावा, माता-पिता पर लागू overflowइसके डिफ़ॉल्ट ( visible) से भिन्न किसी भी मूल्य के पतन को रोका जा सकेगा। इस प्रकार, दोनों overflow: autoका overflow: hiddenप्रभाव समान होगा। hiddenयदि माता-पिता के पास एक निश्चित ऊंचाई है, तो सामग्री को छिपाने के अनपेक्षित परिणाम का उपयोग करते समय शायद एकमात्र अंतर ।

अन्य गुण, जो एक बार माता-पिता पर लागू होते हैं, इस व्यवहार को ठीक करने में मदद कर सकते हैं:

• float: left / right
• position: absolute
• display: inline-block / flex

आप उन सभी को यहाँ देख सकते हैं: http://jsfiddle.net/XB9wX/1/ ।

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

स्रोत: साइटपॉइंट का लेख मार्जिन का पतन

Comments

ध्यान दें कि यदि यह शून्य मान नहीं है तो पैडिंग भी इसे प्रभावित कर सकती है

— म्लाडेन जेंज़ेटोविक

ध्यान दें कि overflow: autoस्क्रॉलबार को मूल तत्व में प्रकट करने के लिए पैदा कर सकता है, बजाय इसके कि अतिप्रवाह सामग्री को अतिप्रवाह करने दिया जाए overflow: visible।

— सिंह

Chrome v44 में 'अतिप्रवाह: ऑटो' काम नहीं करता है।

— tkane2000

प्रदर्शन के लिए धन्यवाद: इनलाइन-ब्लॉक, इसने मुझे बचा लिया :)

— अलेक्ससलाबोनी

flexइसके डिफॉल्ट से अलग मूल्य का कोई भी मूल्य मार्जिन पतन को निष्क्रिय कर देगा

— ओलेड

Answer 2

आप इसके लिए अच्छे पुराने माइक्रो क्लियरफिक्स का भी इस्तेमाल कर सकते हैं।

#container:before, #container:after{
    content: ' ';
    display: table;
}

अपडेटेड फ़िडल देखें: http://jsfiddle.net/XB9wX/97/

Comments

मेरे जवाब को एक सामुदायिक विकि में बदल दिया है। कृपया बेझिझक अपने उत्तर के साथ इसका विस्तार करें। धन्यवाद।

— हक्कासन

मुझे यह नहीं मिलता, जब मुझे लगता है कि उदाहरण हाशिये ढह रहे हैं (20px के बजाय divs के बीच केवल 10px ऊर्ध्वाधर स्थान)

— Andy

यह केवल भाई-बहनों के बीच के पतन को दूर करने में मदद करता है कि सभी में यह स्पष्टता है। मैंने इसे प्रदर्शित करने के लिए उदाहरण के लिए forked किया है: jsfiddle.net/dpyuyg07 --- और यहां तक ​​कि यह पूरी कहानी नहीं है। यह केवल उन तत्वों के बच्चों से उपजी मार्जिन के पतन को हटाता है जहां आपने उस फिक्स को लागू किया है। यदि आप कन्टेनर पर एक मार्जिन जोड़ते हैं, तो मार्जिन अभी भी ढह जाएगा, जो इस कांटे में देखा जा सकता है: jsfiddle.net/oew7qsjx

— NicBright

मैं इसे और भी सटीक रूप से रख सकता हूं: क्लीयरफिक्स विधि केवल माता-पिता और बच्चों के बीच मार्जिन पतन को रोकती है। यह निकटवर्ती भाई-बहनों के बीच के पतन को प्रभावित नहीं करता है।

— निकोबार

मुझे लगता है कि अब मैं DOM :beforeऔर :afterतत्वों को भरने के लिए बूटस्ट्रैप की प्रवृत्ति को समझता हूं । मैंने अब इस नियम को अपनी स्टाइलशीट में जोड़ लिया है div:before, div:after{content: ' '; display: table;}:। बहुत खुबस। अचानक सामान उम्मीद के मुताबिक व्यवहार करने लगता है।

— Stijn de Witt

Answer 3

मार्जिन को निष्क्रिय करने की एक साफ-सुथरी चाल, जिसका कोई दृश्य प्रभाव नहीं है, जहां तक ​​मुझे पता है, माता-पिता की गद्दी निर्धारित कर रही है 0.05px:

.parentClass {
    padding: 0.05px;
}

गद्दी अब 0 नहीं है, इसलिए ढहना अब नहीं होगा, लेकिन साथ ही साथ गद्दी इतनी छोटी है कि नेत्रहीन यह 0 से नीचे हो जाएगी।

यदि कुछ अन्य पैडिंग वांछित है, तो केवल "दिशा" में पैडिंग लागू करें जिसमें मार्जिन टकराना वांछित नहीं है, उदाहरण के लिए padding-top: 0.05px;।

काम करने का उदाहरण:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

संपादित करें: से मूल्य बदल 0.1करने के लिए 0.05। जैसा कि क्रिस मॉर्गन ने एक टिप्पणी में उल्लेख किया है, और इस छोटे से परीक्षण से , ऐसा लगता है कि वास्तव में फ़ायरफ़ॉक्स 0.1pxगद्दी को ध्यान में रखता है । हालांकि, 0.05pxचाल करने के लिए लगता है।

Comments

यह मेरा पसंदीदा उपाय है। आप इसे एक डिफ़ॉल्ट शैली के रूप में भी शामिल कर सकते हैं। क्यों नहीं? *{padding-top:0.1px}। क्या हमें यकीन है कि यह सभी ब्राउज़रों में काम करता है?

— निक मैनिंग 19

मेरे लिए अब तक बहुत अच्छा काम किया है, लेकिन मैं ज्यादातर ब्राउज़रों में इसे पूरी तरह से जांचने का दावा नहीं करता।

— निकु सर्डू

बहुत अच्छा समाधान, यह अधिकांश ब्राउज़रों पर अपेक्षित रूप से काम करता है। इसे साझा करने के लिए धन्यवाद!

— वायर्डोल्फिन

यह एक कुशल समाधान के रूप में है करता उच्च- DPI प्रदर्शनों और उपपिक्सेल गणना की वजह से विभिन्न परिस्थितियों में अतिरिक्त पिक्सल जोड़ने के लिए,। (फ़ायरफ़ॉक्स ने उम्र के लिए सबपिक्सल लेआउट किया है, मेरा मानना ​​है कि अन्य ब्राउज़रों ने हाल ही में सूट के बाद तुलना की है।)

— क्रिस मॉर्गन

0.05pxअभी भी एक विशिष्ट विकल्प की तरह लगता है, न कि एक यादृच्छिक ब्राउज़र चालबाजी संख्या, जो मैं पसंद करूंगा 0.01px।

— वोल्कर ई।

Answer 4

overflow:hidden हाशिये को गिरने से रोकता है लेकिन यह दुष्प्रभावों से मुक्त नहीं है - अर्थात् यह ... अतिप्रवाह छुपाता है।

इसके अलावा और आपने जो उल्लेख किया है, उसे बस इसके साथ जीना सीखना है और इस दिन के लिए सीखना है जब वे वास्तव में उपयोगी होते हैं (हर 3 से 5 साल में आता है)।

Comments

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

— hqcasanova

overflow: autoछिपे हुए अतिप्रवाह को रोकने के लिए उपयोग करना अच्छा है और अभी भी हाशिये के पतन को रोकना है।

— गैविन

@ गेविन, overflow:auto;मेरे सामग्री क्षेत्र को कुछ पृष्ठों पर स्क्रॉलबार बना दिया।

— रीड

Answer 5

वास्तव में, ऐसा कोई है जो निर्दोष रूप से काम करता है:

प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: कॉलम;

जब तक आप केवल IE10 और ऊपर के समर्थन के साथ रह सकते हैं

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Comments

इसके लिए एक सामान्य समाधान के रूप में काम करने के लिए, किसी को इसके <div>भीतर एक अतिरिक्त जोड़ना होगा .container, अन्यथा यह .containerअपने बच्चों के बॉक्स-मॉडल को नियंत्रित करेगा। उदाहरण के लिए, इनलाइन तत्व पूर्ण-चौड़ाई वाले ब्लॉक तत्व बन जाएंगे; अगर वे हाशिये पर हैं, तो वे भी मार्जिन-ढह जाएंगे।

— zupa

Answer 6

प्रत्येक वेबकिट आधारित ब्राउज़र को गुणों का समर्थन करना चाहिए -webkit-margin-collapse। केवल उप या निचले मार्जिन के लिए सेट करने के लिए उपप्रकार भी हैं। आप इसे मानों को ढह सकते हैं (डिफ़ॉल्ट), त्यागें (यदि मार्जिन है तो 0 पर सेट करता है), और अलग (अलग-अलग अंतराल को रोकता है)।

मैंने परीक्षण किया है कि यह क्रोम और सफारी के 2014 संस्करणों पर काम करता है। दुर्भाग्य से, मुझे नहीं लगता कि यह IE में समर्थित होगा क्योंकि यह वेबकिट पर आधारित नहीं है।

एक पूर्ण विवरण के लिए एप्पल के सफारी सीएसएस संदर्भ पढ़ें ।

यदि आप मोज़िला के सीएसएस वेबकिट एक्सटेंशन पृष्ठ की जांच करते हैं, तो वे इन गुणों को स्वामित्व के रूप में सूचीबद्ध करते हैं और उनका उपयोग न करने की सलाह देते हैं। इसका कारण यह है कि वे जल्द ही कभी भी मानक CSS में नहीं जाने वाले हैं और केवल वेबकिट आधारित ब्राउज़र ही उनका समर्थन करेंगे।

Comments

यह अच्छा है क्योंकि यह हमें सफारी और क्रोम को मार्जिन से निपटने के तरीके में एक असंगति से लोहा लेने में मदद करता है।

— बज्सन

Answer 7

मुझे पता है कि यह एक बहुत पुरानी पोस्ट है, लेकिन सिर्फ यह कहना चाहता हूं कि किसी मूल तत्व पर फ्लेक्सबॉक्स का उपयोग करने से इसके बाल तत्वों के लिए मार्जिन ढहने को अक्षम कर दिया जाएगा।

Comments

न केवल अपने बाल तत्वों के लिए - यह माता-पिता और पहले और अंतिम बच्चे के बीच मार्जिन के पतन को भी रोकता है।

— स्वेन मार्नाच

Answer 8

माता-पिता के होने के कारण मुझे मार्जिन गिरने की समस्या थी position सापेक्ष । यहां उन कमांडों की सूची दी गई है जिनका उपयोग आप मार्जिन को ढहने को अक्षम करने के लिए कर सकते हैं।

यहाँ खेलने के लिए परीक्षण है

बस किसी भी parent-fix*वर्ग को div.containerतत्व या किसी भी वर्ग को असाइन करने का प्रयास children-fix*करेंdiv.margin । अपनी जरूरतों के हिसाब से जो सबसे उपयुक्त हो, उसे चुनें।

कब

• मार्जिन गिर है विकलांग , div.absoluteलाल रंग की पृष्ठभूमि के साथ पेज के शीर्ष पर तैनात किया जाएगा।
• मार्जिन गिर रहा div.absolute है उसी के रूप में Y समन्वय किया जाएगाdiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

यहाँ jsFiddle उदाहरण के साथ आप संपादित कर सकते हैं

Answer 9

नए ब्राउज़र में (IE11 को छोड़कर), पैरेंट-चाइल्ड मार्जिन को रोकने के लिए एक सरल उपाय का उपयोग करना है display: flow-root। हालांकि, आपको आसन्न तत्व के पतन को रोकने के लिए अभी भी अन्य तकनीकों की आवश्यकता होगी।

DEMO (पहले)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

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

डेमो (बाद)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

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

Answer 10

आपकी जानकारी के लिए आप ग्रिड का उपयोग कर सकते हैं लेकिन दुष्प्रभाव के साथ :)

.parent {
  display: grid
}