चौड़ाई/ऊंचाई को प्रभावित किए बिना डीआईवी पैडिंग कैसे बदलें?

Question

मेरे पास एक div है कि मैं एक फिक्स्ड चौड़ाई और ऊंचाई निर्दिष्ट करना चाहता हूं, और एक पैडिंग जिसे मूल डीआईवी चौड़ाई/ऊंचाई कम करने या इसे बढ़ाने के बिना बदला जा सकता है, उसके लिए एक सीएसएस चाल है, या एक वैकल्पिक उपयोग गद्दी?

Answer 1

समाधान निश्चित चौड़ाई बाहरी div के साथ अपने गद्देदार div, रैप करने के लिए है

एचटीएमएल

<div class="outer"> 
    <div class="inner"> 

     <!-- your content --> 

    </div><!-- end .inner --> 
</div><!-- end .outer --> 

सीएसएस

.outer, .inner { 
    display: block; 
} 

.outer { 
    /* specify fixed width */ 
    width: 300px; 
    padding: 0; 
} 

.inner { 
    /* specify padding, can be changed while remaining fixed width of .outer */ 
    padding: 5px; 
} 

Answer 2

एक सतत परिणाम क्रॉस ब्राउज़र प्राप्त करने के लिए, आप आमतौर पर divdiv के अंदर जोड़ देंगे और कोई स्पष्ट चौड़ाई नहीं देंगे, और margin। margin बाहरी div के लिए padding अनुकरण करेगा।

Answer 3

लगता है कि आपने कर रहे हैंआईई 6 बॉक्स मॉडल अनुकरण करने के लिए देख रहे हैं। इसे प्राप्त करने के लिए आप सीएसएस 3 प्रॉपर्टी box-sizing: border-box का उपयोग कर सकते हैं। यह आईई 8 द्वारा समर्थित है, लेकिन फ़ायरफ़ॉक्स के लिए आपको -moz-box-sizing और सफारी/क्रोम के लिए उपयोग करने की आवश्यकता होगी, -webkit-box-sizing का उपयोग करें।

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

Answer 4

प्रचार इस और आप अच्छा होना चाहिए:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

यह समाधान अतिरिक्त रैपर का उपयोग किए बिना लागू किया जा सकता

Answer 5

इस चाल की कोशिश

div{ 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;  
box-sizing: border-box;  
} 

इस ब्राउज़र के लिए बाध्य करेगा div के "बाहरी" -विड्थ के अनुसार चौड़ाई की गणना करने के लिए, इसका मतलब है कि पैडिंग चौड़ाई से निकाली जाएगी।