CSS पैडिंग तत्व का आकार क्यों बढ़ाता है?

Question

मैं अपने div और textarea को कुछ पैडिंग देने की कोशिश कर रहा हूं। जब मैं ऐसा करता हूं, तो यह तत्व के आकार को बढ़ाता है, बजाय इसके अंदर सामग्री क्षेत्र को सिकोड़ने के। क्या कोई ऐसा तरीका है जिसे मैं करने की कोशिश कर रहा हूं?

Comments

आप परीक्षण करने के लिए किस ब्राउज़र का उपयोग कर रहे हैं?

— पीटर टेलर

* {box-sizing: border-box;}अपनी स्टाइलशीट में जोड़ें , और साइज़िंग आपकी अपेक्षा के अनुसार काम करेगी। पॉल आयरिश ने पुष्टि की कि यह सभी आधुनिक ब्राउज़रों के लिए सुरक्षित है: paulirish.com/2012/box-sizing-border-box-ftw

— Ross Allen

Answer 1

आप box-sizing:border-boxकंटेनर तत्व में जोड़ सकते हैं , चौड़ाई और ऊंचाई को निर्दिष्ट करने में सक्षम होने के लिए जब आप तत्व में पैडिंग और / या बॉर्डर जोड़ते हैं, तो यह भिन्न नहीं होता है।

विनिर्देशों के लिए यहां (एमडीएन) देखें ।

अपडेट करें (उत्तर के लिए कॉपी की गई टिप्पणी)

एमडीएन स्पेक्स केborder-box अनुसार, इस समय सभी प्रमुख ब्राउज़रों में मूल्य का समर्थन किया जाता है

निश्चित रूप से कुछ ब्राउज़र उचित उपसर्ग यानी की आवश्यकता है -webkitऔर -mozआप स्पष्ट रूप से देख सकते हैं यहां

Comments

अभी, एमडीएन स्पेक्स केborder-box अनुसार, सभी प्रमुख ब्राउज़रों में मूल्य का समर्थन किया गया है - बेशक कुछ ब्राउज़रों को उचित उपसर्ग की आवश्यकता होती है, और जैसा कि आप स्पष्ट रूप से यहां देख सकते हैं-webkit-moz

— एरेनोर पाज़

यह बात है! अंतिम समाधान!

— 19GA पर 71GA

Answer 2

CSS2 के चश्मे के अनुसार , बॉक्स प्रकार के तत्व की प्रदान की गई चौड़ाई इसकी चौड़ाई, बाईं / दाईं सीमा और बाएं / दाएं पैडिंग के बराबर है (बाएं / दायां मार्जिन खेल में भी आता है)। यदि आपके बॉक्स में '100%' की चौड़ाई है और इसमें मार्जिन, बॉर्डर और पैडिंग भी है, तो वे ऑब्जेक्ट द्वारा कब्जा की गई चौड़ाई को प्रभावित (बढ़ाएँ) करेंगे।

इसलिए, यदि आपके टेक्सटेरिया को 100% चौड़ा होना चाहिए, तो चौड़ाई, मार्जिन-लेफ्ट / राइट, बॉर्डर-लेफ्ट / राइट और पेडिंग-लेफ्ट / राइट को इस तरह से असाइन करें कि उनकी राशि 100% के बराबर हो।

---

CSS3 में हमारे पास तीन बॉक्स-आकार वाले मॉडल हैं । आप border-boxमॉडल का उपयोग कर सकते हैं :

इस तत्व पर निर्दिष्ट चौड़ाई और ऊंचाई (और संबंधित न्यूनतम / अधिकतम गुण) तत्व के बॉर्डर बॉक्स को निर्धारित करते हैं। यही है, तत्व पर निर्दिष्ट कोई भी गद्दी या सीमा इस निर्धारित चौड़ाई और ऊंचाई के अंदर रखी और खींची गई है। सामग्री की चौड़ाई और ऊँचाई की गणना, निर्दिष्ट 'चौड़ाई' और 'ऊँचाई' के गुणों से संबंधित पक्षों की सीमा और पैडिंग चौड़ाई घटाकर की जाती है।

Answer 3

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

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

हालांकि यह केवल निश्चित आकार के कंटेनरों के लिए काम करता है

Answer 4

यह ब्राउज़र पर निर्भर करता है और यह बॉक्स मॉडल का कार्यान्वयन है । आप जो अनुभव कर रहे हैं वह सही व्यवहार है।

IE पारंपरिक रूप से गलत हो गया: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Comments

"गलत" जैसा कि W3C के साथ आया था उससे अलग है, लेकिन जहां तक ​​अधिक सहज / आसान काम है।

— pbz

@pbz: आप शायद सबसे सही हैं। लेकिन अराजकता से बचने के लिए चश्मे का पालन किया जाना चाहिए, जो वास्तव में IE के कारण होता है।

— चेरोविम

@cherouvim नहीं, W3C CSS बॉक्स मॉडल के चारों ओर अराजकता का एकमात्र कारण है। इस बिंदु पर उनकी बंदूकों से चिपके रहने के लिए IE को धन्यवाद दिया जाना चाहिए, या हम अभी भी हास्यास्पद रूप से बेतुका W3C बॉक्स मॉडल के साथ फंस जाएंगे।

— सेल्फ एविडेंट

Answer 5

अधिक क्रॉस-ब्राउज़र समाधान के लिए, आप इस व्यवहार से बच सकते हैं, जो भी टैग को निश्चित चौड़ाई के साथ किसी अन्य टैग में पैडिंग की आवश्यकता होती है, उसे लपेटकर, और इसे चौड़ाई देते हुए: ऑटो। इस तरह, यदि माता-पिता की चौड़ाई x है, और आप बच्चे को पैडिंग जोड़ते हैं, तो बच्चे को x की पूरी चौड़ाई विरासत में मिलेगी, पैडिंग को सही ढंग से लागू करते हुए बिना पेरेंट चौड़ाई या अपने स्वयं के।

Answer 6

एक div डिफ़ॉल्ट रूप से ब्राउज़र संगतता मुद्दों से बचने के अपनी मूल कंटेनर की चौड़ाई लेता है, हां, तो आप एक जोड़ सकते हैं बच्चे div निर्दिष्ट में div तो करने के लिए आवश्यक गद्दी जोड़ने बच्चे div ।

NB - चाइल्ड डिव की चौड़ाई निर्दिष्ट न करें क्योंकि यदि आप पैडिंग जोड़ते हैं तो यह बढ़ेगा