सीएसएस - 100% + पैडिंग?

Question

अधिकांश लोगों को पता है,

5px पैडिंग के साथ 100% div वास्तव में 100% + 10px चौड़ा है।

इसका एक स्पष्ट समाधान wrap the child div in a wrapper that has a 10px margin है, हालांकि इस विधि के लिए आपको अतिरिक्त मार्कअप जोड़ने की आवश्यकता है, मैं अतिरिक्त div के बिना 100% + पैडिंग करने का तरीका ढूंढ रहा हूं।

किसी भी विचार?

Answer 1

<div> जैसे ब्लॉक तत्व पैडिंग के बाद स्वचालित रूप से 100% चौड़ाई मानते हैं। अर्थात। आपको पैडिंग निर्दिष्ट करके वांछित प्रभाव प्राप्त करने में सक्षम होना चाहिए, auto पर चौड़ाई छोड़कर और यह सुनिश्चित करना कि तत्व display: block (<div> के लिए डिफ़ॉल्ट है)।

http://jsfiddle.net/EMYBm/8/

Answer 2

आप box-sizing सीएसएस संपत्ति पर गौर करना चाहिए ...

• http://www.w3.org/TR/css3-ui/#box-sizing
• https://developer.mozilla.org/en/CSS/box-sizing

मैं एक साथ एक उदाहरण रखा आप को दिखाने के लिए कि यह कैसे काम करता है और box-sizing संपत्ति रखने और इसे रखने के बीच अंतर। बेला की जाँच करें ...

http://jsfiddle.net/UnsungHero97/bKsad/2/

ध्यान दें कि यह IE7 या नीचे में काम नहीं करेगा:/

मुझे आशा है कि इस मदद करता है।
हिस्टो