CSS काम में नकारात्मक मार्जिन कैसे करते हैं और क्यों है (मार्जिन-टॉप: -5! = मार्जिन-बॉटम: 5)?

108

ऊर्ध्वाधर सीएसएस तत्वों के लिए एक सामान्य चाल निम्नलिखित सीएसएस का उपयोग करना है:

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

क्रोम के रूप में मीट्रिक दृश्य में देखे जाने पर यह वही है जो आप देखते हैं:

यहां छवि विवरण दर्ज करें

हालाँकि, कोई दृश्य मार्जिन नहीं दिखाया गया है जब आप तत्व पर होवर करते हैं अर्थात मार्जिन सीमा के बाहर 'है' और कल्पना की जा सकती है। लेकिन नकारात्मक मार्जिन नहीं दिखा। वे कैसे दिखते हैं और ऐसा क्या है जो इसे अलग बनाता है?

जैसा margin-top:-8px है वैसा क्यों नहीं हैmargin-bottom:8px ?

तो बस कैसे नकारात्मक मार्जिन काम करते हैं और उनके पीछे अंतर्ज्ञान क्या है। वे margin-top < 0एक आइटम के मामले में 'टक्कर' कैसे लेते हैं ?

css margin

— पीएचडी
स्रोत

89

नकारात्मक मार्जिन सीएसएस में मान्य हैं और उनके (अनुरूप) व्यवहार को समझना मुख्य रूप से बॉक्स मॉडल और मार्जिन के ढहने पर आधारित है । जबकि कुछ परिदृश्य अधिक जटिल हैं, कल्पना का अध्ययन करने के बाद बहुत सी सामान्य गलतियों से बचा जा सकता है।

उदाहरण के लिए, आपके नमूना कोड का प्रतिपादन सीएसएस युक्ति द्वारा निर्देशित है जैसा कि पूरी तरह से गैर-प्रतिस्थापित तत्वों के लिए ऊंचाइयों और मार्जिन की गणना में वर्णित है ।

यदि मैं एक चित्रमय प्रतिनिधित्व करने के लिए था, तो मैं शायद इस तरह से कुछ करूँगा (पैमाने पर नहीं):

नकारात्मक शीर्ष मार्जिन

मार्जिन बॉक्स खो 8pxशीर्ष पर है, लेकिन इस को प्रभावित नहीं करता सामग्री और गद्दी बक्से । क्योंकि आपका तत्व बिल्कुल स्थिति में है, तत्व को 8px ऊपर ले जाने से लेआउट में कोई और गड़बड़ी नहीं होती है; स्थैतिक में प्रवाह सामग्री के साथ हमेशा ऐसा नहीं होता है।

बक्शीश:

अभी भी आश्वस्त होने की जरूरत है कि रीडिंग स्पेक्स जाने का तरीका है (जैसा कि इस तरह के लेखों के विपरीत है )? मुझे लगता है कि आप तत्व को लंबवत करने की कोशिश कर रहे हैं, इसलिए आपको सेट क्यों करना है margin-top:-8px;और क्या नहीं margin-top:-50%;?

खैर, CSS में वर्टिकल सेंटरिंग कठिन से कठिन है । % में भी ऊपर या नीचे के मार्जिन की स्थापना करते समय , मान की गणना एक प्रतिशत के रूप में की जाती है जिसमें हमेशा ब्लॉक की चौड़ाई के सापेक्ष होता है । यह बल्कि एक आम नुकसान है और क्वर्क को शायद ही कभी w3 डॉक्स के बाहर वर्णित किया जाता है

— ov
स्रोत

84

मैं इसे नेत्रहीन समझाने की कोशिश करूंगा:

/**
 * explaining margins
 */

body {
  padding: 3em 15%
}

.parent {
  width: 50%;
  width: 400px;
  height: 400px;
  position: relative;
  background: lemonchiffon;
}

.parent:before,
.parent:after {
  position: absolute;
  content: "";
}

.parent:before {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: dashed 1px #ccc;
}

.parent:after {
  left: 0;
  right: 0;
  top: 50%;
  border-top: dashed 1px #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background: rgba(200, 198, 133, .5);
}

ul {
  padding: 5% 20px;
}

.set1 .child {
  margin: 0;
  position: relative;
}

.set2 .child {
  margin-left: 75px;
  position: relative;
}

.set3 .child {
  margin-left: -75px;
  position: relative;
}


/* position absolute */

.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}

.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}

.set6 .child {
  top: 50%; /* level from which margin-top starts 
	- downwards, in the case of a positive margin
	- upwards, in the case of a negative margin	
	*/
  left: 50%; /* level from which margin-left starts 
	- towards right, in the case of a positive margin
	- towards left, in the case of a negative margin	
	*/
  margin: -75px;
  position: absolute;
}

<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
  <div class="child">
    <pre>
.set1 .child {
  margin: 0;
  position: relative;
}
		</pre>
  </div>
</div>

<h3>Set 2</h3>
<div class="parent set2">
  <div class="child">
    <pre>
.set2 .child {
  margin-left: 75px;
  position: relative;
}
		</pre>
  </div>
</div>

<h3>Set 3</h3>
<div class="parent set3">
  <div class="child">
    <pre>
.set3 .child {
  margin-left: -75px;
  position: relative;
}
		</pre>
  </div>
</div>

<h2><code>position: absolute;</code></h2>

<h3>Set 4</h3>
<div class="parent set4">
  <div class="child">
    <pre>
.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}
		</pre>
  </div>
</div>

<h3>Set 5</h3>
<div class="parent set5">
  <div class="child">
    <pre>
.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}
		</pre>
  </div>
</div>

<h3>Set 6</h3>
<div class="parent set6">
  <div class="child">
    <pre>
.set6 .child {
  top: 50%;
  left: 50%;
  margin: -75px;
  position: absolute;
}
		</pre>
  </div>
</div>

स्निपेट का विस्तार करें

— एना
स्रोत

33

मार्जिन आपके तत्व के बाहर रिक्ति है, जैसे पैडिंग आपके तत्व के अंदर रिक्ति है।

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

— डेविड हेडलंड
स्रोत

2

+1 मुझे आपका उत्तर पसंद है। इसे शब्दों को इंजेक्ट करके onsetऔर बेहतर किया जा सकता है offset। यह सच है कि बहुत से लोग हमेशा offset( नकारात्मक ) शब्द का उपयोग करते हैं जब उनका मतलब onset( सकारात्मक ) होता है। यदि आप अपना उत्तर अपडेट करते हैं तो यह संदेश स्वयं नष्ट हो जाएगा। चीयर्स!

— आर्टट्रॉनिक्स

1

किस बारे में margin-bottom: -8px;? जैसा margin-bottom:-8pxहै वैसा क्यों नहीं है margin-top:-8px?

— रिक

27

-8px के मार्जिन-टॉप का मतलब है कि यह 0 मार्जिन से 8 गुना अधिक होगा।

8px के मार्जिन-बॉटम का मतलब है कि इसके नीचे की चीज़ 8px और नीचे होगी, अगर इसमें 0 मार्जिन था।

— धनी ब्रजवासी
स्रोत

1

मैं बस चीजों को सरल रखने की कोशिश कर रहा था, लेकिन मैं सहमत हूं, यह संभवतः मेरे उत्तरों का सबसे खराब लिखा गया है!

— रिच ब्रैडशॉ

2

मुझे लगता है कि उत्तर बहुत अच्छा है। अत्यधिक तकनीकी उत्तरों का कोई उपयोग नहीं है कि हम में से आधे इसे प्राप्त नहीं करते हैं।

— नंबर 945

1

किस बारे में margin-bottom: -8px;? जैसा margin-bottom:-8pxहै वैसा क्यों नहीं है margin-top:-8px?

— रिक

22

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

"मार्जिन-टॉप क्यों: -8px मार्जिन-बॉटम: 8px के समान नहीं है?"

हम यह भी पूछ सकते हैं:

एक सकारात्मक तल मार्जिन पूर्ववर्ती तत्वों को 'टक्कर' क्यों नहीं देता है, जबकि एक सकारात्मक शीर्ष-मार्जिन निम्न तत्वों को दबा देता है?

इसलिए हम देखते हैं कि मार्जिन के प्रतिपादन में एक अंतर है कि जिस तरफ वे लागू होते हैं, उसके आधार पर - शीर्ष (और बाएं) मार्जिन नीचे (और दाएं) वाले से भिन्न होते हैं।

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

निम्नलिखित HTML पर विचार करें:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

कोड में उनकी स्थिति के अनुरूप, ये तीन बॉक्स ब्राउज़र में 'टॉप-डाउन' दिखाई देते हैं ( चीजों को सरल रखते हुए, हम यहाँ ordercss3 'फ्लेक्स-बॉक्स' मॉड्यूल की संपत्ति पर विचार नहीं करेंगे )। इसलिए, जब भी शैलियों को बॉक्स 3 पर लागू किया जाता है, तो पूर्ववर्ती तत्वों की स्थिति (बॉक्स 1 और 2 के लिए) पहले से ही निर्धारित की गई है, और रेंडरिंग गति के लिए किसी भी अधिक को बदल नहीं दिया जाना चाहिए।

अब, बॉक्स के लिए -10px के एक शीर्ष मार्जिन की कल्पना करें। कुछ जगह इकट्ठा करने के लिए सभी पूर्ववर्ती तत्वों को स्थानांतरित करने के बजाय, ब्राउज़र बॉक्स को केवल 3 ऊपर धकेल देगा, इसलिए यह z- सूचकांक के आधार पर (या नीचे) के शीर्ष पर प्रदान किया जाता है ) किसी भी पूर्ववर्ती तत्व। यहां तक कि अगर प्रदर्शन एक मुद्दा नहीं था, तो सभी तत्वों को ऊपर ले जाने का मतलब उन्हें व्यूपोर्ट से बाहर स्थानांतरित करना हो सकता है, इस प्रकार वर्तमान स्क्रॉलिंग स्थिति को फिर से सब कुछ दिखाई देने के लिए बदल देना होगा।

यह बॉक्स 3 के लिए नीचे के मार्जिन पर लागू होता है, दोनों नकारात्मक और सकारात्मक: पहले से ही मूल्यांकन किए गए तत्वों को प्रभावित करने के बजाय, आगामी तत्वों के लिए केवल एक नया 'शुरुआती बिंदु' निर्धारित किया जाता है। इस प्रकार एक सकारात्मक तल मार्जिन सेट करने से निम्न तत्व नीचे आ जाएंगे ; एक नकारात्मक उन्हें ऊपर धकेल देगा।

— schellmax
स्रोत

सबसे अच्छा जवाब। यह एक भी "क्यों" की व्याख्या कर रहा है, जबकि अन्य उत्तर केवल "कैसे" की व्याख्या करते हैं।

— अमीर होसेन अहमदी

1

इस जवाब ने मुझे बेहतर समझने में मदद की। साभार @schellmax

— iRamesh

3

क्योंकि आपने पूर्ण स्थिति का उपयोग किया है, और एक शीर्ष प्रतिशत निर्दिष्ट किया है, केवल मार्जिन-टॉप आपके .item ऑब्जेक्ट के स्थान को प्रभावित करेगा। यदि इसके बजाय आपने इसे नीचे: 50% का उपयोग करके पोस्ट किया है, तो इसे केंद्र में रखने के लिए आपको मार्जिन-बॉटम -8 पीएक्स की आवश्यकता होगी, और मार्जिन-टॉप का कोई प्रभाव नहीं होगा।

मार्जिन किसी तत्व की सीमाओं को प्रभावित करने की स्थिति में प्रभावित करता है, या तो बिल्कुल आपके मामले में, या पड़ोसी तत्वों के सापेक्ष। कल्पना करें कि मार्जिन आपके तत्व की नींव है जिस पर वह बैठता है। वे आम तौर पर इसके आकार के समान होते हैं, लेकिन किसी भी या सभी चार किनारों पर इसे बड़ा या छोटा किया जा सकता है।

आपका सीएसएस ब्राउज़र को आपके तत्व के शीर्ष को पृष्ठ के नीचे एक बिंदु 50% के अंतर पर स्थिति को बताता है। हालाँकि, चूंकि सभी तत्व एक पिक्सेल नहीं हैं, इसलिए ब्राउज़र को यह जानना होगा कि पृष्ठ के नीचे 50% तक लाइन के किस हिस्से में यह है। तत्व के शीर्ष को अस्तर करने के लिए, यह शीर्ष मार्जिन का उपयोग करता है। डिफ़ॉल्ट रूप से यह तत्व के शीर्ष के अनुरूप है, लेकिन आप इसे सीएसएस के साथ बदल सकते हैं।

आपके मामले में, शीर्ष 50% पृष्ठ के मध्य में शुरू होने वाले तत्व के शीर्ष पर होगा। एक नकारात्मक शीर्ष मार्जिन को लागू करने से, ब्राउज़र बिंदु 8px का उपयोग शीर्ष से तत्व में करता है (अर्थात इसके मध्य में रेखा) 50% पर स्थिति के रूप में।

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

— रोब ट्रिकी
स्रोत

+1। समझ में आता है ... यह दृश्य संकेत के साथ इसे बढ़ाने के लिए इतनी के रूप में पूरा करने के लिए महान हो जाएगा दृश्य ।

— पीएचडी

3

मुझे आश्चर्य है कि अगर इस सवाल का अच्छी तरह से उत्तर दिया गया है: सीएसएस मार्जिन कैसे काम करता है और यह क्यों है कि मार्जिन-टॉप: -5; मार्जिन-बॉटम: 5? के समान नहीं है?

मार्जिन तत्व के परिवेश से दूरी है। मार्जिन-टॉप कहते हैं "... परिवेश से दूरी के रूप में हम तत्व के 'बॉक्स' के शीर्ष 'पक्ष' से मापते हैं और मार्जिन-नीचे से 'बॉक्स' के नीचे 'पक्ष' से दूरी होती है"। फिर मार्जिन-टॉप: 5; उस मामले में शीर्ष 'पक्ष' परिधि से संबंधित है, -5; शीर्ष 'ओर' से आने वाली कोई भी चीज़ 5 तत्व के शीर्ष 'पक्ष' को ओवरलैप कर सकती है और मार्जिन-बॉटम: 5; तत्व नीचे 'पक्ष' और आसपास के बीच की दूरी 5 है।

मूल रूप से, लेकिन फ्लोटेड तत्वों से प्रभावित है और जैसे: http://www.w3.org/TR/CSS2/box.html#margin-properties ।

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

मैं सही होने के लिए खड़ा हूं।

— शायद
स्रोत