सीएसएस नकारात्मक पैडिंग का समर्थन क्यों नहीं करता है?

Question

मैंने इसे कई बार देखा है कि एक नकारात्मक पैडिंग की संभावना कुछ पृष्ठ तत्वों के सीएसएस के विकास को बेहतर और आसान बनाने में मदद कर सकती है। फिर भी, W3C CSS में एक नकारात्मक पैडिंग के लिए कोई प्रावधान नहीं है। इसके पीछे का कारण क्या है? क्या संपत्ति में कोई बाधा है जो इसे इस तरह से उपयोग करने से रोकती है? आपके उत्तर के लिए धन्यवाद।

अद्यतन

मैं देख रहा हूँ, उदाहरण के लिए, अगर आप कहते हैं कुछ है कि,, लंबवत स्पेसिंग की एक 20px एक फ़ॉन्ट का उपयोग कर रहे हैं, और आप फ़ॉन्ट की तह तक डैश वाला बॉर्डर आवेदन करना चाहते हैं के रूप में, जब एक हाइपरलिंक प्रकट होता है का कहना है। ऐसे मामलों में आप शैली को बहुत अधिक जर्जर पाएंगे, क्योंकि धराशायी सीमा निर्दिष्ट शब्द के नीचे 20px होगी। यदि आप नकारात्मक मार्जिन का उपयोग करते हैं, तो यह काम करने वाला नहीं है, क्योंकि मार्जिन सीमाओं के बाहर के क्षेत्र को बदल देता है। नकारात्मक पैडिंग ऐसी स्थितियों में मदद कर सकती है।

Comments

क्योंकि इससे नकारात्मक पैडिंग होने का कोई मतलब नहीं है

— पेटा

यह वैसा ही है जैसा आप फ्रंटपेज द्वारा जेनरेट किए गए HTML पर देखेंगे। यह थोड़े काम करता है, लेकिन मान्य होने पर बहुत सारी त्रुटियों का एक नरक देता है। नकारात्मक पैडिंग कल्पना का हिस्सा नहीं है, लेकिन फिर भी ब्राउज़रों द्वारा समर्थित है।

— लिनस क्लेन

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

— थेसेज़

अगर किसी के लिए "कुछ मतलब नहीं है", तो यह उनके लिए किसी और के रास्ते में आने का कोई बहाना नहीं है।

— रॉल्फ

मैं एक <span>टैग में कोड प्रदर्शित करने का प्रयास कर रहा हूं और जिस तरह से कोड के ब्लॉक की शुरुआत में अतिरिक्त लाइन ब्रेक फेंकता है, वह हो जाता है। नकारात्मक पैडिंग के साथ, मैं इस अतिरिक्त स्थान को दूर कर सकता था।

— स्टीवन लू

Answer 1

मैंने हाल ही में एक अलग सवाल का जवाब दिया जहां मैंने चर्चा की कि बॉक्स मॉडल ऐसा क्यों है।

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

Comments

धन्यवाद दोस्त। जो मुझे एक संतोषजनक कारण देता है। चीयर्स। :)

— ikartik90

क्या होगा अगर आप बॉर्डर को टेक्स्ट के करीब सिकोड़ना चाहते हैं, उदाहरण के लिए जब आप बॉर्डर इमेज का उपयोग कर रहे हैं।

— हिमेटर

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

— रॉल्फ

एह, यह एक कारण है, लेकिन मैं इसे संतोषजनक नहीं कहूंगा। यह एक ऐसा मामला है जहां कल्पना मेरे पृष्ठ को परिभाषित करने के तरीके से परे बताती है और मुझे यह बताना शुरू करती है कि मुझे अपने पृष्ठ को कैसे परिभाषित करना चाहिए । अगर मैं चाहता हूं कि मेरी सामग्री मेरी पृष्ठभूमि के किनारों, सीमाओं और / या मार्जिन को ओवरलैप कर दे, तो यह मेरा विशेषाधिकार होना चाहिए, कल्पना की कल्पनाओं की कल्पना कि मैं ऐसा क्यों करना चाहता हूं। क्षमा करें, बस थोड़ा चिढ़ है कि मुझे विशेष रूप से आकार के विभाजक को प्राप्त करने के लिए वाक्यविन्यास cruft या इससे भी बदतर, एकल पिक्सेल चौड़े एकल रंग चित्रों को जोड़ना होगा जो पाठ ऊंचाई से छोटा है और लंबवत केंद्रित है।

— जेसन

@zzzzBov, मुझे लगा कि मैं इस उदाहरण के कारण प्रासंगिक था कि आखिर मैं ऐसा क्यों करना चाहता हूं, जो इस पृष्ठ पर टिप्पणियों में एक सामान्य प्रश्न है। बेशक, मेरा घोड़ा उस बिंदु तक थोड़ा ऊँचा था।

— जेसन

Answer 2

परिभाषा द्वारा पैडिंग एक सकारात्मक पूर्णांक (0 सहित) है।

नकारात्मक पैडिंग के कारण सीमा सामग्री में ढह जाएगी ( w3 पर बॉक्स-मॉडल पृष्ठ देखें) - यह सामग्री क्षेत्र को सामग्री से छोटा बना देगा, जिसका कोई मतलब नहीं है।

Comments

सीमा सामग्री में ढहना वास्तव में वांछित प्रभाव है। क्या आप इस प्रभाव को प्राप्त करने के किसी अन्य तरीके के बारे में जानते हैं?

— रॉल्फ

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

— यति

Answer 3

मैं एक बहुत अच्छे उदाहरण का वर्णन करना चाहूंगा कि negative paddingयह उपयोगी और भयानक क्यों होगा।

जैसा कि हम सभी CSS डेवलपर्स जानते हैं, एक दूसरे के भीतर डायनामिक रूप से साइज़िंग डिब को संरेखित करना एक परेशानी है, और अधिकांश भाग के लिए, केवल सीएसएस का उपयोग करना असंभव माना जाता है। इसमें negative paddingबदलाव का समावेश हो सकता है।

कृपया निम्न HTML की समीक्षा करें:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

निम्नलिखित सीएसएस के साथ, हम divबाहरी रूप से भीतर की सामग्री को लंबवत रूप से केंद्र में लाने में सक्षम होंगे div:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

मुझे समझाने की अनुमति दें ...

50% पर आंतरिक div के शीर्ष की स्थिति बाहरी केंद्र के केंद्र में आंतरिक div के शीर्ष किनारे को रखती है। बहुत साधारण। इसका कारण यह है कि प्रतिशत आधारित स्थिति मूल तत्व के आंतरिक आयामों के सापेक्ष है ।

दूसरी ओर, प्रतिशत आधारित पैडिंग , लक्षित तत्व के आंतरिक आयामों पर आधारित है । तो, padding-top: -50%;हम की संपत्ति को लागू करके आंतरिक div की सामग्री की ऊंचाई का 50% की दूरी से आंतरिक div की सामग्री को ऊपर की ओर स्थानांतरित कर दिया है, इसलिए आंतरिक div की सामग्री को बाहरी div के भीतर केंद्रित करना और अभी भी ऊंचाई के आयाम की अनुमति देना आंतरिक div गतिशील होने के लिए!

यदि आप मुझसे ओपी पूछते हैं, तो यह सबसे अच्छा उपयोग-मामला होगा, और मुझे लगता है कि इसे लागू किया जाना चाहिए ताकि मैं यह हैक कर सकूं। जबरदस्त हंसी। या, उन्हें बस की कार्यक्षमता को ठीक करना चाहिए vertical-alignऔर हमें vertical-alignसभी तत्वों पर उस काम का एक संस्करण देना चाहिए ।

Comments

हां, लेकिन उस उद्देश्य के लिए मैं HTML तत्वों के लिए नई विशेषताओं के बजाय अन्य विशेषताओं के व्यवहार को अपहृत करने के बजाय। आपका उदाहरण एक नई आंतरिक-शीर्ष विशेषता के लिए कहता है; अपेक्षाकृत तैनात तत्व की सर्वोच्च विशेषता की तरह, लेकिन स्वयं के सापेक्ष, माता-पिता के लिए नहीं। नकारात्मक पैडिंग का एक और अच्छा उपयोग 100% पैडिंग के साथ अपनी चौड़ाई भरने के लिए आनुपातिक रूप से एक तत्व बनाना होगा, लेकिन तत्व को अधिक बढ़ने की अनुमति देता है यदि अधिक सामग्री इसे ओवरफ्लो करती है, जो कि सामग्री एक अतिरिक्त एब्स-पॉस सिबलिंग में असंभव है। नकारात्मक पैडिंग गद्दी-ढहने वाले तत्व को उसके आकार में वापस ले जाएगा।

— सर्जियो

2018 में केंद्रित करना उतना ही आसान है जितना डिस्प्ले फ्लेक्स का उपयोग करना औचित्यपूर्ण सामग्री और संरेखित-आइटमों के साथ ... कोड की 3 पंक्तियाँ बिल्कुल सही केंद्रित होना चाहिए।

— kaiser

Answer 4

यह मदद कर सकता है, वैसे:

बॉक्स आकार सीएसएस संपत्ति डिफ़ॉल्ट सीएसएस बॉक्स calculate चौड़ाई और तत्वों की ऊंचाई करने के लिए इस्तेमाल मॉडल को बदलने के लिए प्रयोग किया जाता है।

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

Answer 5

आपने पूछा क्यों नहीं, इसे धोखा कैसे दें:

आमतौर पर प्रारंभिक कार्यान्वयन के प्रोग्रामर के आलस्य के कारण, क्योंकि वे पहले से ही अन्य विशेषताओं में अधिक प्रयास करते हैं, फ़्लोट्स की तरह अधिक विषम दुष्प्रभाव प्रदान करते हैं, क्योंकि वे तब डिजाइनरों द्वारा अधिक अनुरोध किए गए थे और फिर भी उन्होंने समय नहीं लिया है इसे अनुमति देने के लिए हम FOUR गुणों का उपयोग अपने पड़ोसियों के खिलाफ एक तत्व को धक्का / खींचने के लिए कर सकते हैं (अब हमारे पास धक्का देने के लिए केवल चार हैं, और खींचने के लिए केवल 2 हैं)।

जब html डिज़ाइन किया गया था, तो पत्रिकाओं को छवियों के आसपास पाठ फिर से पढ़ना पसंद था, अब नफरत हो गई है क्योंकि आज हमारे पास स्पर्श के रुझान हैं, और बहुत सारी जगह के साथ स्क्वीरी चीजें और पढ़ने के लिए कुछ भी नहीं है। इसलिए वे फ़्लोटिंग पर केंद्र की तुलना में अधिक दबाव डालते हैं, या वे ऐसा कुछ डिज़ाइन कर सकते हैं margin-top: fill;या margin: average 0;केवल सामग्री को नीचे तक संरेखित कर सकते हैं , या इसके अतिरिक्त स्थान को वितरित कर सकते हैं।

इस मामले में मुझे लगता है कि इसे उसी कारण से लागू नहीं किया गया है जो सीएसएस को :parentछद्म चयनकर्ता की कमी के कारण बनाता है : लूपिंग मूल्यांकन को रोकने के लिए।

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

यही कारण है कि (मुझे लगता है) पैडिंग की गणना चौड़ाई पर की जाती है, क्योंकि यह वह मूल्य है जो इसे पेंट करने के लिए शुरू करने के समय उपलब्ध था।

यदि आपके पास पैडिंग के लिए एक नकारात्मक मूल्य है, तो यह बाहरी सीमाओं को प्रभावित करेगा, जो कि पहले से ही मार्जिन सेट होने पर ALREADY परिभाषित किया गया है। मुझे पता है, अभी तक कुछ भी चित्रित नहीं किया गया है, लेकिन जब आप पढ़ते हैं कि पेंटिंग की प्रक्रिया कैसे होती है, तो 90 की तकनीक के साथ प्रतिभाओं द्वारा बनाई गई है, तो मुझे लगता है कि मैं गूंगा सवाल पूछ रहा हूं और बस "धन्यवाद" कह रहा हूं।

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

यदि आप InDesign की तरह जटिल रीफ़्लोविंग और पोज़िशनिंग के साथ एप्लिकेशन देखते हैं, तो आप उस तेज़ को स्क्रॉल नहीं कर सकते हैं! यह प्रोसेसर और ग्राफिक कार्ड दोनों से अगले पृष्ठों पर जाने के लिए एक बड़ा प्रयास करता है!

तो पेंटिंग और आगे की गणना और एक बार तैयार किए गए एक तत्व के बारे में भूल जाना, अब के लिए यह एक MUST प्रतीत होता है।

Answer 6

कंटेनरों के अंदर एक इफ्रेम को रखने से कंटेनर का आकार मेल नहीं खाएगा। यह लगभग 20px की पैडिंग जोड़ता है। वर्तमान में इसे ठीक करने का कोई आसान तरीका नहीं है। आपको जावास्क्रिप्ट ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ ) की आवश्यकता है

नकारात्मक मार्जिन एक आसान समाधान होगा।

Answer 7

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

हां, यह 2019 में CSS3 के साथ अभी भी प्रासंगिक है; बिंदु में मामला: फ्लेक्सबॉक्स लेआउट। Flexbox आइटमों का मार्जिन कम नहीं होता है, इसलिए उन्हें समान रूप से रखने के लिए और उन्हें कंटेनर के दृश्य किनारे के साथ संरेखित करें, किसी को अपने कंटेनर की गद्दी से आइटम के मार्जिन को घटाना होगा। यदि कोई परिणाम <0 है, तो आपको कंटेनर पर एक नकारात्मक मार्जिन का उपयोग करना होगा, या मौजूदा मार्जिन के साथ उस नकारात्मक राशि का उपयोग करना होगा। I तत्व की सामग्री पर प्रभाव पड़ता है कि कोई इसके लिए मार्जिन को कैसे परिभाषित करता है, जो पीछे की ओर है। जब फ्लेमिंग तत्वों की सामग्री में विभिन्न इकाइयों में परिभाषित मार्जिन होता है या एक अलग फ़ॉन्ट-आकार, आदि से प्रभावित होते हैं, तो सुमिंग सफाई से काम नहीं करती है।

नीचे दिए गए उदाहरण में, आदर्श रूप से संरेखित और समान रूप से स्लेटी रंग के बक्से हैं, लेकिन दुख की बात है कि वे नहीं हैं।

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

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