कुल चौड़ाई बदलने के बिना पैडिंग जोड़ें

Question

मैं पूर्वनिर्धारित चौड़ाई के शीर्ष पर जोड़े बिना तत्व में पैडिंग कैसे जोड़ सकता हूं?

लेआउट के लिए क्लीन ग्रिड बनाने के लिए कॉलम की चौड़ाई को परिभाषित करना अच्छा है; लेकिन कॉलम के अंदर सामग्री में पैडिंग भी जोड़ना चाहता है। इसे निर्दिष्ट करने का कोई तरीका?

Answer 1

element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

Answer 2

उपयोग बॉक्स आकार, यह गद्दी समावेशी बनाता है: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

उदाहरण:

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
} 

यह ध्यान देने योग्य है कि इस IE7 पर काम नहीं करेगा लायक है।

IE8 लिए, कृपया यह क्यू के शीर्ष जवाब देखें: box-sizing: border-box => for IE8?

Answer 3

हर आप तत्व, इस तत्व परिवर्तन की चौड़ाई ब्लॉक करने के लिए गद्दी जोड़ें। इस समस्या में कई समाधान हैं। मैं आमतौर पर इस तत्व के लिए margin सेट करता हूं और इस तत्व के लिए width: 100% सेट करता हूं।

उदाहरण के लिए, हमने: इन तत्वों के लिए

<div id="main"> 
    <div id="child"> 
     This is content with margin 
    </div> 
</div> 

सीएसएस शैली:

#main { 
    border: solid 1px red; 
    float: left; 
    width: 5em; 
} 

#child { 
    border: solid 1px blue; 
    float: left; 
    width: 100%; 
    margin: 0.5em; 
} 

यह किसी भी ब्राउज़र

Answer 4

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

मैंने दिया। : डी लेकिन मैंने केंद्र में एक आंतरिक डीआईवी लगाई और इसे चौड़ाई = 9 0% दी। अब तक इतना अच्छा, एक बहुत ही सरल और अच्छा समाधान नहीं है, लेकिन कभी-कभी यह आपको आवश्यक रूप से प्राप्त करने में मदद करता है। ;]

बीआरआर