2010-02-04 8 views
30

मुझे आश्चर्य हुआ जब मुझे पता चला कि <div> के आकार के साथ - कहें - 200px 220px चौड़ा हो जाता है यदि आप इसे 10px पैडिंग देते हैं। यह सिर्फ मुझे कोई समझ नहीं आता है, जब आंतरिक सेटिंग करता है तो बाहरी आकार बदलना नहीं चाहिए। जब भी आप पैडिंग को ट्विक करते हैं, तो यह आपको आकार को समायोजित करने के लिए मजबूर करता है।क्या कोई कारण है कि पैडिंग तत्व के आकार में क्यों जुड़ती है?

क्या मैं कुछ गलत कर रहा हूं, या इस व्यवहार के लिए कोई कारण है?

संपादित करें: मुझे पता है कि यह कैसे काम करना है, मेरा सवाल है क्यों? क्या यह एक तरह से तार्किक है जिसे मैं समझ नहीं पा रहा हूं? क्या यह आकार और पैडिंग को अलग रखने के विपरीत दृष्टिकोण पर कोई लाभ देता है?

उत्तर

55

दो विभिन्न तथाकथित "बॉक्स मॉडल" कर रहे हैं, एक है, जबकि अन्य नहीं है, निर्दिष्ट width को गद्दी (और सीमा) कहते हैं। CSS3 के आगमन के साथ, आप सौभाग्य से दो मॉडल के बीच स्विच कर सकते हैं। दरअसल, व्यवहार आप देख रहे हैं अपने div के सीएसएस में

box-sizing: border-box; 
ms-box-sizing: border-box; 
webkit-box-sizing: border-box; 
moz-box-sizing: border-box; 
width: 200px; 

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

संपादित करें: WRT क्यों पारंपरिक बॉक्स मॉडल के रूप में यह है के रूप में अपने संपादित, विकिपीडिया वास्तव में offers some insight:

एचटीएमएल 4 और सीएसएस से पहले, बहुत कुछ HTML तत्वों दोनों बॉर्डर तथा पैडिंग समर्थित , इसलिए तत्व की चौड़ाई और ऊंचाई की परिभाषा बहुत विवादास्पद नहीं थी। हालांकि, यह तत्व के आधार पर भिन्न है। तालिका की HTML चौड़ाई विशेषता तालिका की चौड़ाई को इसकी सीमा सहित परिभाषित करती है। दूसरी तरफ, छवि की HTML चौड़ाई विशेषता ने छवि की चौड़ाई को परिभाषित किया है (किसी भी सीमा के अंदर)। उन प्रारंभिक दिनों में पैडिंग का समर्थन करने वाला एकमात्र तत्व टेबल सेल था। सेल के लिए चौड़ाई को "सेल पैडिंग को छोड़कर पिक्सेल में सेल सामग्री के लिए सुझाई गई चौड़ाई" के रूप में परिभाषित किया गया था।

सीएसएस ने कई और तत्वों के लिए मार्जिन, सीमा और पैडिंग पेश की। इसने टेबल सेल के लिए सामग्री, सीमा, मार्जिन और पैडिंग के संबंध में परिभाषा चौड़ाई अपनाई। तब से यह डब्ल्यू 3 सी बॉक्स मॉडल के रूप में जाना जाता है।

+0

धन्यवाद! उसने हमेशा मुझे पागल कर दिया है। – cbmeeks

+0

+1 स्वीट! मुझे थोड़ी देर के लिए एक समस्या का पता लगाने में मदद मिली! – Ignas

4

पैडिंग किसी ऑब्जेक्ट की दी गई चौड़ाई के अतिरिक्त होने के लिए माना जाता है।

सीएसएस 2.1 specification for box model देखें।

हालांकि यह सच है कि आप पैडिंग को आंतरिक या बाहरी विशेषता के रूप में देख सकते हैं, इस तथ्य का तथ्य यह है कि वर्तमान विनिर्देशों के अनुसार यह एक बाहरी विशेषता है। यह दो के बीच एक विकल्प था, जहां तक ​​मैं कह सकता हूं, समान रूप से मान्य विकल्प।

मैंने box-model विशेषता पर पढ़ा नहीं है, लेकिन यह मानते हुए कि एलेक्स सही है, तो भविष्य में आप पैडिंग की व्याख्या करने के दो तरीकों के बीच चयन करने में सक्षम होंगे।

+0

क्या 'मार्जिन' बाहरी विशेषता नहीं है? 'पैडिंग' तत्व के बाहरी हिस्से में कुछ भी नहीं करता है। –

+1

@ केम्प; यदि आप चश्मे में बॉक्स मॉडल को देखते हैं, तो आप देखेंगे कि पैडिंग आंतरिक है (यानी सीमा के अंदर) और मार्जिन बाहरी है (सीमा के बाहर।) मेरा सबसे अच्छा अनुमान है कि उन्होंने पैडिंग घटाने के बजाए ऐसा क्यों करना चुना तत्व की चौड़ाई और हाइट से एक शब्द, 'छवियों' में सारांशित किया जा सकता है। –

+0

और स्पष्ट रूप से वर्तनी, मेरा किले नहीं है –

0

यदि आकार पैडिंग के साथ बढ़ता है, तो यह इरादे के रूप में काम कर रहा है। पुराने इंटरनेट एक्सप्लोरर संस्करणों जैसे टूटे हुए बॉक्स मॉडल वाले ब्राउज़र में, div 100 पिक्सल चौड़ा होगा, लेकिन यह सीएसएस का गलत प्रबंधन है।

http://www.w3schools.com/css/css_boxmodel.asp

+0

कभी भी डब्ल्यू 3 स्कूल्स का कुछ भी भरोसा न करें। http://w3fools.com/। अगर आप इस जवाब को ठीक करते हैं तो मुझे पिंग करें! – Ryley

5

इसका कारण यह है कि तकनीकी रूप से तत्वों की चौड़ाई सामग्री पर लागू होती है, कंटेनर नहीं।

सीएसएस 1 विनिर्देश, 1999 में 1996 में वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा जारी और संशोधित, जब एक चौड़ाई या ऊंचाई स्पष्ट रूप से किसी भी ब्लॉक स्तर तत्व के लिए निर्दिष्ट किया जाता है के अनुसार, यह केवल चौड़ाई का निर्धारण करना चाहिए या दृश्य तत्व की ऊंचाई, पैडिंग, सीमाओं, और मार्जिन के बाद लागू किया गया।

More info about this behavior *

* अस्वीकरण: हाँ, यह मेरे अपने ब्लॉग है और मुझे लगता है कि मैं बॉक्स मॉडल समझा तो मैं संदर्भ के रूप में डाल रहा हूं का पूरी तरह से काम किया है।

0

यदि बॉक्स मॉडल इस तरह से काम नहीं करता है, तो आप किसी छवि के चारों ओर पैडिंग से कैसे निपटेंगे? क्या आप पसंद करेंगे कि img तत्व का आकार पैडिंग के साथ छवि के पिक्सेल आयामों से मेल नहीं खाता है? या वह पैडिंग छवि को कवर करता है?

यह बेहतर है कि डिफ़ॉल्ट व्यवहार यह है कि कंटेनर की चौड़ाई पैडिंग या मार्जिन मानों से प्रभावित नहीं होती है।

-3

"" यदि बॉक्स मॉडल इस तरह से काम नहीं करता है, तो आप छवि के चारों ओर पैडिंग से कैसे निपटेंगे? क्या आप पसंद करेंगे कि पैडिंग के साथ एक आईएमजी तत्व का आकार छवि के पिक्सेल आयामों से मेल नहीं खाता है? या कि पैडिंग छवि को कवर करता है? ""

सबसे पहले, कोई भी अच्छा वेब डेवलपर एक छवि को एक कंटेनर में रखने से बेहतर जानता है जहां यह फिट नहीं होता है। यह 101 विकसित हो रहा है। यदि पैडिंग छवि के लिए अनुमति नहीं देता है, तो छवि या पैडिंग को बदला जाना चाहिए। शुद्ध व सरल। तो ऊपर वर्णित तर्क दोषपूर्ण है।

पैडिंग एक आंतरिक सेटिंग है, जो कंटेनर की सीमाओं के लिए आंतरिक है। तो जब उस कंटेनर के अंदर कुछ होता है, और आप कंटेनर के पैडिंग को बढ़ाते हैं, तो उस कंटेनर के अंदर आइटम को कोड किया जाना चाहिए ताकि आकार में कम किया जा सके।

शब्द "पैडिंग" स्वयं यह सब कहता है। क्या आप कल्पना कर सकते हैं कि यूपीएस ने सामग्री को सुरक्षित रखने के लिए अपने बक्से में पैडिंग जोड़ा है, केवल यह पता लगाने के लिए कि बॉक्स आकार में बढ़ता है! हास्यास्पद, है ना? निश्चित रूप से यह है! पैडिंग कंटेनर को तोड़ने और ऊंचाई या चौड़ाई में विस्तार किए बिना कंटेनर के अंदर के आस-पास की जगह जोड़ने के लिए है।

यह मोज़िला, गीको, और ओपेरा जैसे ब्राउज़र हैं जो बॉक्स मॉडल तोड़ चुके हैं, आईई नहीं। बॉक्स मॉडल जो "कंसोडियम" उपकरण सबसे अच्छा है और वेब डेवेलर्स पर कहर बरकरार है।

यदि "कंसर्डियम" ने आईई के समान बॉक्स मॉडल को लागू किया है, तो हमारे डेवलपर्स के पास हमारे वेबपृष्ठों के कॉलम के साथ बहुत आसान समय होगा। मुझे लगता है कि आपको उस बिंदु पर मुझसे सहमत होना है। सादा और सरल।

मैं लोगों से इतना थक गया हूं कि आईई कम है। मैं कई उदाहरण दे सकता हूं जहां आईई मजबूत है जबकि सस्ता ब्राउज़र जैसे फ़ायरफ़ॉक्स दबाव में टूट जाते हैं।

मेरे दो सेंट। यदि आप चाहते हैं तो मुझे नफरत है, लेकिन जो मैं बोलता हूं वह सामान्य ज्ञान है और कुछ भी नहीं।

+4

मुझे लगता है कि सभी वेब डेवलपर्स आपको सोचने के लिए नफरत करते हैं कि आईई बेहतर है। आईई (यहां तक ​​कि आईई 8) में कीड़े हमें सभी काम के अंतहीन घंटे का कारण बनती हैं। मुझे अभी तक IE9 में एक बग नहीं मिला है, लेकिन चूंकि यह XP पर समर्थित नहीं है, इसलिए मैं भी सपना देख सकता हूं ... – tster

+2

-1 इस उत्तर के बारे में बहुत सारी चीज़ें हैं जो मुझे नहीं पता कि मुझे नहीं पता –

+0

शुरू करने के लिए सभी ब्राउज़रों में कीड़े मुझे काम के अंतहीन घंटे का कारण बनती हैं। – mhenry1384

0

यदि आपका बॉक्स बॉक्स के भीतर है, तो आंतरिक बॉक्स की चौड़ाई (पैडिंग वाला वाला) हटा दें और इससे समस्या ठीक हो जाएगी।

संबंधित मुद्दे