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

Question

मेरे पास एक div है जिसे मैं एक FIXED चौड़ाई और ऊंचाई निर्दिष्ट करना चाहता हूं, और एक पैडिंग भी है जिसे मूल 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;
}

Comments

बस स्पष्ट करने के लिए नहीं था, मुझे यकीन नहीं है, लेकिन यह केवल क्षैतिज पैडिंग के लिए काम करेगा? ऊंचाई के रूप में: ऑटो माता-पिता को चौड़ाई की तरह नहीं भरता है: ऑटो करता है।

— जोनाथन अज़ुले

Answer 2

अपने सीएसएस में इसे घोषित करें और आपको अच्छा होना चाहिए:

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

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

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

Comments

यह एक आकर्षण की तरह काम करता है मैं नौसिखिया हूं बस इस संपत्ति को

— खोजो

क्या कोई साइड इफेक्ट्स हैं जिनका उपयोग करते समय मुझे ध्यान रखना चाहिए?

— रेडी

यह समाधान स्वीकार किए गए से बेहतर है, और अब उपसर्गों का उपयोग नहीं करना सुरक्षित है: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork आपने मेरे समय की बड़ी राशि को बचाया। धन्यवाद।

— हार्दिक चौधरी

Answer 3

ऐसा लगता है जैसे आप IE6 बॉक्स मॉडल का अनुकरण करना चाहते हैं। आप इसे प्राप्त करने के लिए CSS 3 प्रॉपर्टी बॉक्स-साइज़िंग: बॉर्डर-बॉक्स का उपयोग कर सकते हैं। यह IE8 द्वारा समर्थित है, लेकिन फ़ायरफ़ॉक्स के लिए आपको -moz-box-sizingसफारी / क्रोम का उपयोग करना होगा , उपयोग करना होगा -webkit-box-sizing।

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

Comments

css3 अभी भी iPad की तरह बहुत नया है :)

— रयान

Answer 4

इस ट्रिक को आजमाएं

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

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

Comments

यह @ adswebwork के उत्तर के समान है, है ना? मैं इसके स्पष्टीकरण की सराहना करता हूं कि यह कैसे काम करता है, लेकिन यह शायद एक टिप्पणी के रूप में बेहतर है

— सनक

क्यों एक समान उत्तर पोस्ट

— एंड्रयू

Answer 5

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