पेरेंट पैडिंग को नजरअंदाज करें

Question

मैं पैरेंट पैडिंग को नजरअंदाज करने के लिए अपना क्षैतिज नियम प्राप्त करने की कोशिश कर रहा हूं।

यहाँ मेरे पास एक सरल उदाहरण है:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

आप पाएंगे कि क्षैतिज नियम माता-पिता से 10px तक विस्तारित होता है। मैं इसे पैडिंग को नजरअंदाज करने की कोशिश कर रहा हूं कि माता-पिता के लिए बाकी सब कुछ जरूरी है।

मुझे पता है कि मैं हर चीज के लिए एक अलग तलाक बना सकता हूं; यह वह उपाय नहीं है जिसकी मुझे तलाश है।

Answer 1

आसान तय, बस करो

margin:-10px

घंटा पर।

Comments

यह काम करता है, लेकिन समस्या यह है कि यह माता-पिता की पूरी लंबाई का विस्तार नहीं करेगा। ऐसा इसलिए है क्योंकि पैडिंग 100px चौड़ाई में शामिल नहीं है, इसका मतलब यह है कि यह वास्तव में 120px चौड़ा है, और <hr>आपकी div के अंत से आपका 20px होगा। इस jsField को देखें मेरा क्या मतलब है: jsfiddle.net/YVrWy/1

— एलेस्टेयर पिट्स

हाँ, मैंने उस समय काम किया जब मैंने इसे जोड़ा; चौड़ाई अप्रासंगिक है।

— सैम

यदि आपको 100% चौड़ाई की आवश्यकता है तो बस चौड़ाई विशेषता के रूप में ऑटो का उपयोग करें। चौड़ाई की गणना दिए गए मार्जिन के संबंध में की जाएगी।

— स्किंगेल

आपको कुछ ऐसा करना चाहिए ... मार्जिन: 0 -15px; ..... अन्यथा घंटा लंबवत रूप से आसन्न सामग्री को सोख लेगा।

— honkskillet

थोड़े हैकिस। इच्छा थी कि एक बेहतर तरीका है

— पुराने जूल

Answer 2

छवि उद्देश्य के लिए आप ऐसा कुछ कर सकते हैं

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

Comments

लेकिन क्या होगा अगर आपको माता-पिता की गद्दी का पता नहीं है?

यह मेरे लिए तब काम आया जब मैं केवल चौड़ाई के बजाय न्यूनतम चौड़ाई का उपयोग करता हूं।

— पेड्रो नाडोलनी

@ user5707327 आप हमेशा माता-पिता की गद्दी पाने के लिए जावास्क्रिप्ट के साथ शैलियों को जोड़ सकते हैं

— adriancho5692

वाह, नकारात्मक चौड़ाई के प्रतिभाशाली उपयोग!

— श्री पिज्जागू

Answer 3

बड़े पैमाने पर इस सवाल का जवाब दिया गया है लेकिन छोटे भागों में सभी के द्वारा। मैं इससे एक मिनट पहले ही निपटा।

मैं एक पैनल के नीचे एक बटन ट्रे रखना चाहता था जहाँ पैनल के चारों ओर 30px हो। बटन ट्रे को नीचे और साइड में फ्लश होना चाहिए।

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

मैंने विचार चलाने के लिए अधिक मांस के साथ यहां एक डेमो किया । हालांकि ऊपर दिए गए प्रमुख तत्व किसी भी माता-पिता को बच्चे पर नकारात्मक मार्जिन से मेल खाते हुए हैं। तब सबसे महत्वपूर्ण अगर आप बच्चे को पूरी चौड़ाई में चलाना चाहते हैं तो ऑटो को चौड़ाई निर्धारित करें। (के रूप में से ऊपर एक टिप्पणी में उल्लेख किया Schlingel )।

Answer 4

Kinda late.But यह सिर्फ गणित के एक बिट लेता है।

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

मेरे पास विंडोज़ नहीं है इसलिए मैंने IE में इसका परीक्षण नहीं किया।

फिडल: फिडेल उदाहरण ..

Comments

आपको पैडिंग-राइट: 60px से पेडिंग-लेफ्ट: 30px; पैडिंग-राइट: 30px, को विभाजित करना चाहिए ताकि जब आप टेक्स्ट-अलाइन: सेंटर का उपयोग करें तो कंटेंट की भरपाई न हो;

— ल्यूक

Answer 5

margin: 0 -10px; 

से बेहतर है

margin: -10px;

बाद में सामग्री को इसमें लंबवत रूप से चूसता है।

Answer 6

आपके माता-पिता 120px चौड़े हैं - यानी हर तरफ 100 चौड़ाई + 20 पैडिंग है इसलिए आपको अपनी लाइन 120px चौड़ी बनाने की आवश्यकता है। यहाँ कोड है। अगली बार ध्यान दें कि पैडिंग तत्व चौड़ाई तक जोड़ता है।

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

Comments

परिभाषित चौड़ाई के साथ आसान है। समस्या यह है कि जब आप चौड़ाई नहीं जानते हैं

— गुइलेरमे फरेरा

@GuilhermeFerreira उपयोग width: auto;में hr। jsfiddle.net/ToolmakerSteve/7p85dsrq/3 दुर्भाग्य से, इस समाधान के लिए अभी भी paddingमाता-पिता द्वारा निर्धारित जानना आवश्यक है ।

— टूलमेकरसेव

Answer 7

समस्या नीचे आ सकती है कि आप किस बॉक्स मॉडल का उपयोग कर रहे हैं। क्या आप IE का उपयोग कर रहे हैं?

जब IE quirks मोड में है, widthतो आपके बॉक्स की बाहरी चौड़ाई है, जिसका अर्थ है कि गद्दी अंदर होगी। तो बॉक्स के अंदर बचा कुल क्षेत्रफल 100px - 2 * 10px = 80pxउस स्थिति में है जब आपका 100px चौड़ा <hr>सही नहीं लगेगा।

यदि आप मानक मोड में हैं, widthतो आपके बॉक्स की आंतरिक चौड़ाई है, और पैडिंग को बाहर जोड़ा गया है। तो बॉक्स की कुल चौड़ाई 100px + 2 * 10px = 120pxआपके लिए बॉक्स के अंदर बिल्कुल 100px छोड़ रही है <hr>।

इसे हल करने के लिए, या तो IE के लिए अपने सीएसएस मूल्यों को समायोजित करें। (फ़ायरफ़ॉक्स में जाँच करें कि क्या यह वहां ठीक दिखता है)। या इससे भी बेहतर, ब्राउज़र को सख्त मोड में किक करने के लिए एक दस्तावेज़ प्रकार सेट करें - जहां IE भी मानक बॉक्स मॉडल का अनुसरण करता है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

Answer 8

यदि आपके पास वर्टिकल पैडिंग वाला पेरेंट कंटेनर है और आप उस वर्टिकल पैडिंग को अनदेखा करने के लिए उस कंटेनर के अंदर कुछ (जैसे एक इमेज) चाहते हैं तो आप 'टॉप' और 'बॉटम' दोनों के लिए एक निगेटिव, लेकिन बराबर, मार्जिन सेट कर सकते हैं:

margin-top: -100px;
margin-bottom: -100px;

वास्तविक मूल्य ज्यादा मायने नहीं रखता है। क्षैतिज पैडिंग के लिए इसे आज़माया नहीं गया है।

Answer 9

आसान तय .. मूल माता-पिता में जोड़ें:

box-sizing: बॉर्डर-बॉक्स;

Answer 10

यहाँ यह करने का एक और तरीका है।

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

यहाँ कुछ उदाहरण repl.it पर दिए गए हैं: https://repl.it/@bryku/LightgrayBleakIntercept