अभिभावक पैडिंग को अनदेखा करें

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

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

आपको लगता है कि क्षैतिज नियम 10px द्वारा माता-पिता से बाहर फैली हुई है मिलेगा:

यहाँ मैं क्या है का एक सरल उदाहरण है। मैं इसे पैडिंग को अनदेखा करने की कोशिश कर रहा हूं कि माता-पिता div में बाकी सब कुछ चाहिए।

मुझे पता है कि मैं बाकी सब कुछ के लिए एक अलग div बना सकता हूं; यह वह समाधान नहीं है जिसे मैं ढूंढ रहा हूं।

स्रोत

2010-11-28 Sam

आसान ठीक है, बस घंटे पर

margin:-10px

है।

स्रोत

2010-11-28 11:39:19 Sam

यह काम करता है की तरह कुछ कर सकते हैं, लेकिन समस्या यह है कि यह माता पिता div की पूरी लंबाई का विस्तार नहीं होगा। ऐसा इसलिए है क्योंकि पैडिंग 100px चौड़ाई में शामिल नहीं है, इसका मतलब है कि यह वास्तव में 120px चौड़ा है, और आपके div के अंत से आपका '

' 20px होगा। मेरे जेएसफ़िल्ड को मेरा क्या मतलब है: http://jsfiddle.net/YVrWy/1/ –

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

+12

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

समस्या आपके द्वारा उपयोग किए जा रहे बॉक्स मॉडल पर आ सकती है। क्या आप आईई का उपयोग कर रहे हैं?

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

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

इसे हल करने के लिए, या तो 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

स्रोत

2010-11-28 12:16:32

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

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

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

स्रोत

2010-11-28 12:19:14 easwee

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

किंडा देर से। लेकिन यह थोड़ा सा गणित लेता है।

.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>

मैं Windows तो मैं IE में यह परीक्षण नहीं किया नहीं है।

बेला: fiddle example..

स्रोत

2013-01-07 20:19:31 sqram

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

margin: 0 -10px;

की तुलना में बेहतर

margin: -10px;

बाद में खड़ी इसे में सामग्री बेकार है।

स्रोत

2015-03-04 01:23:10 honkskillet

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

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

.panel 
{ 
    padding: 30px; 
} 

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

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

स्रोत

2015-08-29 07:26:26

छवि प्रयोजन के लिए आप इस

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

स्रोत

2017-08-10 13:27:39 adriancho5692

अभिभावक पैडिंग को अनदेखा करें

उत्तर

संबंधित मुद्दे