CSS बॉक्स मॉडल दृश्य

कैसे उपयोग करें

1. बॉक्स मॉडल मान दर्ज करें: फ़ील्ड या इंटरैक्टिव स्लाइडर में मार्जिन, बॉर्डर, पैडिंग और कंटेंट आयाम सेट करें।
2. विज़ुअलाइज़ेशन अन्वेषण करें: क्लासिक नेस्टेड-बॉक्स आरेख वास्तविक समय में अपडेट होता है, मार्जिन (नारंगी), बॉर्डर (पीला), पैडिंग (हरा), कंटेंट।
3. CSS कॉपी करें: कॉन्फ़िगर किए गए तत्व के पूर्ण बॉक्स मॉडल गुण पाने के लिए CSS कॉपी करें पर क्लिक करें।

CSS बॉक्स मॉडल विज़ुअलाइज़र क्यों इस्तेमाल करें?

CSS बॉक्स मॉडल वेब लेआउट की सबसे मौलिक अवधारणाओं में से एक है, और सबसे आम बग स्रोतों में से एक।

विशेषताएँ

• इंटरैक्टिव आरेख: रंग-कोडित परतों (मार्जिन, बॉर्डर, पैडिंग, कंटेंट) के साथ नेस्टेड बॉक्स मॉडल का क्लासिक दृश्य।
• box-sizing टॉगल: content-box और border-box के बीच स्विच करें और देखें प्रत्येक मोड कुल आयामों को कैसे प्रभावित करता है।
• व्यक्तिगत पक्ष: मार्जिन, पैडिंग और बॉर्डर के लिए ऊपर/दाएँ/नीचे/बाएँ मान स्वतंत्र रूप से सेट करें।
• कुल आकार गणना: तत्व की गणना की गई कुल चौड़ाई और ऊँचाई प्रदर्शित करता है।
• CSS आउटपुट: कॉन्फ़िगर किए गए बॉक्स मॉडल के लिए उपयोग-तैयार CSS जनरेट करता है।

अक्सर पूछे जाने वाले प्रश्न

content-box और border-box में क्या अंतर है?

content-box (डिफ़ॉल्ट) के साथ, width और height केवल सामग्री क्षेत्र पर लागू होते हैं, padding और border तत्व के कुल आकार में जोड़े जाते हैं। border-box के साथ, width और height में padding और border शामिल हैं, जिससे आकार अधिक अनुमानित होता है। अधिकांश आधुनिक CSS resets सभी तत्वों पर box-sizing: border-box लागू करते हैं।

मार्जिन कोलैप्सिंग क्या है?

जब दो लंबवत मार्जिन छूते हैं (आसन्न ब्लॉक तत्वों के बीच या माता-पिता और पहले/अंतिम बच्चे के बीच), वे दो मानों में से बड़े के बराबर एक एकल मार्जिन में विलीन हो जाते हैं। यह flex या grid बच्चों के साथ नहीं होता, और न ही padding या बॉर्डर वाले तत्वों के साथ।

मैं inline तत्वों के नीचे अतिरिक्त स्थान कैसे हटाऊँ?

inline तत्वों (जैसे <img>) के नीचे line-height बेसलाइन संरेखण के कारण एक छोटा सा गैप होता है। इसे तत्व पर display: block, या vertical-align: bottom, या माता-पिता पर font-size: 0 सेट करके ठीक करें।

CSS बॉक्स मॉडल वास्तव में क्या परिभाषित करता है

CSS बॉक्स मॉडल वेब पेज पर प्रत्येक तत्व का आयताकार प्रतिनिधित्व है। प्रत्येक तत्व में चार संकेंद्रित बॉक्स होते हैं: कंटेंट बॉक्स (जहाँ टेक्स्ट, छवियाँ, बच्चे तत्व रहते हैं), padding बॉक्स (कंटेंट और बॉर्डर के बीच स्थान, दृश्य सीमा के अंदर), बॉर्डर बॉक्स (padding के चारों ओर खींची गई दृश्य रूपरेखा), और मार्जिन बॉक्स (बॉर्डर के बाहर पारदर्शी स्थान जो इस तत्व को अपने पड़ोसियों से अलग करता है)। एक तत्व का कुल दृश्य आकार कंटेंट + padding + बॉर्डर है; मार्जिन अदृश्य है लेकिन अन्य तत्वों को दूर धकेलती है।

महत्वपूर्ण अवधारणा box-sizing है। डिफ़ॉल्ट रूप से (box-sizing: content-box, CSS 1 विशिष्टता मान), width और height गुण केवल कंटेंट बॉक्स पर लागू होते हैं। यदि आप width: 200px; padding: 20px; border: 2px solid सेट करते हैं, कुल रेंडर की गई चौड़ाई 200 + 40 + 4 = 244 पिक्सेल है। यह प्रति-स्वज्ञ है: «200px चौड़ा» तत्व वास्तव में 244 पिक्सेल क्षैतिज स्थान लेता है। box-sizing: border-box विकल्प (CSS 3 में जोड़ा गया) इसे उलट देता है: width गुण padding और बॉर्डर सहित कुल दृश्य आकार है, इसलिए कंटेंट क्षेत्र फिट होने के लिए सिकुड़ता है। border-box वह है जो अधिकांश डेवलपर्स अपेक्षा करते हैं; यह Paul Irish के 2012 «* { box-sizing: border-box }» CSS रीसेट के माध्यम से वास्तविक मानक बन गया।

बॉक्स मॉडल को समझना महत्वपूर्ण है क्योंकि लेआउट बग लगभग हमेशा इस भ्रम का पता लगाते हैं कि कौन सा मान किस बॉक्स पर लागू होता है। «मेरा तत्व मेरे द्वारा सेट किए गए से अधिक चौड़ा क्यों है?» content-box आश्चर्य है। «मेरा मार्जिन भाई-बहनों को नीचे क्यों नहीं धकेलता?» आमतौर पर मार्जिन कोलैप्स है। «padding-top: 50% अजीब क्यों व्यवहार करता है?» क्योंकि प्रतिशत padding माता-पिता की चौड़ाई के सापेक्ष गणना की जाती है, ऊँचाई नहीं। हर CSS डेवलपर इन भ्रमों का सामना करता है; यह विज़ुअलाइज़र उन्हें ठोस बनाता है, आपको मान समायोजित करने और परिणामी बॉक्स ज्यामिति को वास्तविक समय में देखने देता है।

यह उपकरण पर्दे के पीछे कैसे काम करता है

इंटरैक्टिव आरेख प्रत्येक बॉक्स के अनुरूप नेस्टेड रंगीन divs की एक श्रृंखला है (मार्जिन नारंगी, बॉर्डर पीला, padding हरा, कंटेंट नीला)। जैसे ही आप इनपुट मान बदलते हैं, JavaScript आरेख divs के इनलाइन style गुणों को अपडेट करता है ताकि वे संख्यात्मक और दृष्टिगत रूप से मानों को प्रतिबिंबित करें। पूर्वावलोकन क्षेत्र में फिट होने के लिए अनुपात स्केल किए जाते हैं; पूर्ण पिक्सेल मान विशिष्ट इनपुट के लिए आरेख को स्क्रीन से बाहर धकेल देंगे।

कुल आकार गणना box-sizing मोड पर निर्भर करती है। content-box के लिए: कुल चौड़ाई = कंटेंट चौड़ाई + padding-left + padding-right + border-left + border-right। border-box के लिए: कुल चौड़ाई = width मान (padding और बॉर्डर कंटेंट क्षेत्र से घटा दिए जाते हैं)। जब आप box-sizing टॉगल करते हैं तो उपकरण एक साथ दोनों मोड की गणना करता है, ताकि आप सीधे तुलना कर सकें।

उत्पन्न CSS आउटपुट आपके इनपुट को गुण मानों के रूप में उपयोग करता है: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;। इसे सीधे अपनी स्टाइलशीट में कॉपी करें और मेल खाने वाली क्लास लागू करें। आपके ब्राउज़र से कुछ भी नहीं निकलता; सब कुछ स्थानीय रूप से JavaScript में चलता है। कोई एनालिटिक्स नहीं, कोई बैकएंड नहीं, कोई खाता नहीं। ताज़ा करें और स्थिति चली जाती है।

CSS बॉक्स मॉडल का संक्षिप्त इतिहास

• CSS 1 content-box निर्दिष्ट करता है, 1996।CSS 1 सिफ़ारिश (दिसंबर 1996) W3C बॉक्स मॉडल को परिभाषित करती है: चौड़ाई केवल कंटेंट पर लागू होती है, padding और बॉर्डर कुल आकार में जुड़ते हैं। यह मानक बन जाता है, लेकिन Internet Explorer 4 और 5 एक वैकल्पिक मॉडल लागू करते हैं जहाँ चौड़ाई में padding और बॉर्डर शामिल हैं (आज के border-box के समान)।
• IE quirks मोड और बॉक्स मॉडल युद्ध, 1997 से 2001।IE 4 (1997) और IE 5 अपने गैर-मानक बॉक्स मॉडल के साथ शिप होते हैं; IE 6 (2001) doctype घोषणा द्वारा ट्रिगर किया गया «स्टैंडर्ड्स मोड» पेश करता है जो W3C बॉक्स मॉडल पर स्विच करता है। यह विसंगति वर्षों के क्रॉस-ब्राउज़र लेआउट बग और «quirks मोड बनाम स्टैंडर्ड्स मोड» ज्ञान बनाती है जो हर वेब डेवलपर को 2010 तक सीखना होगा।
• CSS रीसेट और Eric Meyer की क्लासिक स्टाइलशीट, 2007।Eric Meyer कैनोनिकल CSS रीसेट प्रकाशित करते हैं (मई 2007) जो सभी तत्वों में मार्जिन, padding और अन्य डिफ़ॉल्ट को शून्य पर सेट करता है। पूर्वानुमेय क्रॉस-ब्राउज़र स्टाइलिंग के लिए मानक अभ्यास बन जाता है। रीसेट box-sizing को सीधे संबोधित नहीं करता लेकिन विरासत डिफ़ॉल्ट के आसपास अराजकता को सामान्य करता है।
• CSS3 में box-sizing गुण, 2009 से 2014।CSS3 box-sizing: border-box को content-box के ऑप्ट-इन विकल्प के रूप में पेश करता है। WebKit और Firefox इसे 2009 से समर्थन करते हैं; IE 8 (2009) इसे मूल रूप से समर्थन करने वाला पहला IE संस्करण बन जाता है। डेवलपर्स को प्रति तत्व IE-स्टाइल या W3C-स्टाइल बॉक्स मॉडल चुनने की अनुमति देता है।
• Paul Irish का यूनिवर्सल border-box, 2012।Paul Irish (Google) ब्लॉग पोस्ट «* { box-sizing: border-box } FTW» प्रकाशित करते हैं (फरवरी 2012), यह तर्क देते हुए कि यूनिवर्सल border-box नई परियोजनाओं के लिए समझदार डिफ़ॉल्ट है। पैटर्न फ्रेमवर्क डिफ़ॉल्ट (Bootstrap, Tailwind, Material UI) के माध्यम से तेज़ी से फैलता है। 2015 तक, अधिकांश CSS रीसेट और फ्रेमवर्क डिफ़ॉल्ट के रूप में border-box के साथ शिप होते हैं।
• तार्किक गुण, 2018 से 2024।CSS Logical Properties and Values Module Level 1 (CR जून 2018) दिशा-अज्ञेय विकल्प पेश करता है: margin-inline-start (टेक्स्ट दिशा की शुरुआत) margin-left के बजाय, padding-block (शीर्ष + निचला) padding-top + padding-bottom के बजाय। दाएँ-से-बाएँ भाषाओं (अरबी, हिब्रू) और आधुनिक अंतर्राष्ट्रीयकरण के लिए महत्वपूर्ण। ब्राउज़र समर्थन 2022 तक 95%+ तक पहुँचता है।

वास्तविक दुनिया के कार्यप्रवाह

• लेआउट बग डीबग करना।जब कोई तत्व अप्रत्याशित आकार में रेंडर होता है, ब्राउज़र के DevTools के कंप्यूटेड स्टाइल पैनल को खोलने से चार बॉक्स मानों को संख्यात्मक रूप से प्रकट किया जाता है। यह विज़ुअलाइज़र पहले से गणित करने के लिए उपयोगी है: «अगर मैं width 200, padding 16, border 2 सेट करूँ, प्रत्येक box-sizing मोड में कुल आकार क्या है?» विशेष रूप से जूनियरों को यह सिखाने में उपयोगी है कि width: 100% padding के साथ content-box मोड में माता-पिता को क्यों ओवरफ्लो करता है।
• शुरुआती लोगों को CSS सिखाना।बॉक्स मॉडल पहली अमूर्त अवधारणा है जिसे शुरुआती वेब डेवलपर्स को आत्मसात करना होगा। एक रंग-कोडित इंटरैक्टिव विज़ुअलाइज़ेशन specs पढ़ने से बेहतर है। बूटकैंप प्रशिक्षक और स्व-अध्ययन शिक्षार्थी बॉक्स मॉडल विज़ुअलाइज़र को «स्पर्शनीय» तरीके के रूप में उपयोग करते हैं ताकि देख सकें कि मार्जिन, बॉर्डर और padding कैसे ढेर होते हैं। यह उपकरण आंशिक रूप से इस उद्देश्य के लिए मौजूद है।
• डिज़ाइन सिस्टम घटक आकार।डिज़ाइन सिस्टम बटन ऊँचाई, padding लय और मार्जिन पैमाने को टोकन में निर्दिष्ट करते हैं (जैसे spacing-1, spacing-2, spacing-3)। कोड में इन्हें लागू करते समय, बॉक्स मॉडल यह निर्धारित करता है कि अंतिम रेंडर बटन इच्छित आकार है। off-by-padding त्रुटियों को पकड़ने के लिए पहले गणित को विज़ुअलाइज़ करें इससे पहले कि वे Figma-से-React हैंडऑफ़ तक पहुँचें।
• रिस्पॉन्सिव डिज़ाइन और प्रतिशत मार्जिन।padding, मार्जिन, width और height के लिए प्रतिशत मान माता-पिता की कंटेंट चौड़ाई (ऊँचाई नहीं, आश्चर्यजनक रूप से) के सापेक्ष गणना की जाती है, जो मोबाइल पर अजीब व्यवहार का कारण बन सकता है। बॉक्स मॉडल विज़ुअलाइज़र आपको CSS लिखने से पहले प्रतिशत के अर्थ के बारे में सोचने में मदद करता है। उदाहरण के लिए, div पर padding-top: 50% एक वर्गाकार पहलू-अनुपात कंटेनर बनाता है (पूर्व-aspect-ratio-संपत्ति दिनों में छवि प्लेसहोल्डर के लिए उपयोग किया जाता था)।
• पहुँच हिट-लक्ष्य आकार।WCAG 2.1 SC 2.5.5 (स्तर AAA) न्यूनतम 44x44 CSS पिक्सेल टच लक्ष्यों की सिफारिश करता है। बॉक्स मॉडल यह निर्धारित करता है कि बटन का संयुक्त कंटेंट + padding इस सीमा को पूरा करता है या नहीं। विज़ुअलाइज़र का उपयोग करके पुष्टि करें कि 18px लाइन-ऊँचाई टेक्स्ट के चारों ओर padding: 12px 16px एक बटन देता है जो दोनों आयामों में 44px से अधिक है, दिशानिर्देश को संतुष्ट करता है।
• CSS Grid और Flexbox संरेखण।आधुनिक लेआउट उपकरण (CSS Grid, Flexbox) प्रत्येक grid/flex आइटम को बॉक्स मॉडल के अधीन बॉक्स के रूप में मानते हैं। यह समझना कि padding और मार्जिन gap, justify-content और align-items के साथ कैसे इंटरैक्ट करते हैं, बॉक्स-मॉडल प्रवाह की आवश्यकता होती है। flex/grid कंटेनर के अंदर मार्जिन कोलैप्सिंग दबा दी जाती है, जो अक्सर पारंपरिक ब्लॉक लेआउट के आदी CSS डेवलपर्स को आश्चर्यचकित करता है।

सामान्य नुकसान और उनका क्या मतलब है

• मार्जिन कोलैप्सिंग आश्चर्य।जब दो ब्लॉक तत्वों की मार्जिन लंबवत स्पर्श करती हैं, वे दोनों में से बड़े में कोलैप्स हो जाती हैं, योग नहीं। 20px निचला मार्जिन 30px ऊपरी मार्जिन से मिलकर 50px नहीं, 30px स्थान उत्पन्न करता है। माता-पिता और पहला/अंतिम बच्चा मार्जिन भी कोलैप्स होते हैं यदि माता-पिता के पास padding, बॉर्डर या overflow सेट नहीं है। flex या grid कंटेनरों के अंदर, मार्जिन कोलैप्स नहीं होते। इस नियम ने किसी न किसी समय हर CSS डेवलपर को पकड़ा है।
• content-box बनाम border-box चौड़ाई गणित।content-box तत्व पर width: 100%; padding: 20px सेट करने से वह माता-पिता से 40px चौड़ा हो जाता है (overflow)। border-box के साथ, वही घोषणा माता-पिता के अंदर सही ढंग से बैठती है। यह सबसे आम बॉक्स-मॉडल जाल है; यूनिवर्सल * { box-sizing: border-box } नियम पहले से अधिकांश को ठीक कर देता है। हमेशा जानें कि आप किस मोड में काम कर रहे हैं।
• प्रतिशत padding/मार्जिन चौड़ाई के सापेक्ष है।padding-top: 50% और margin-bottom: 50% माता-पिता की कंटेंट चौड़ाई के आधार पर प्रतिशत की गणना करते हैं, ऊँचाई नहीं। यह गैर-स्पष्ट है और क्लासिक «पहलू अनुपात कंटेनर» हैक का आधार है (padding-top: 56.25% वाला div 16:9 बॉक्स बनाता है)। अब CSS में aspect-ratio गुण है, लेकिन विरासत कोड और आधुनिक Tailwind दोनों प्रतिशत-padding ट्रिक पर निर्भर करते हैं।
• इनलाइन तत्व बेसलाइन अंतर।कंटेनिंग div के अंदर एक <img> के नीचे एक रहस्यमय 4 से 6 पिक्सेल अंतर है। ऐसा इसलिए है क्योंकि इनलाइन तत्व टेक्स्ट बेसलाइन के साथ संरेखित होते हैं, descenders के लिए जगह छोड़ते हैं। img { display: block }, img { vertical-align: bottom }, या माता-पिता पर font-size: 0 सेट करके ठीक करें। यह CSS में सबसे पुराने बॉक्स-मॉडल बगों में से एक है, 1996 से।
• लेआउट चालों के लिए नकारात्मक मार्जिन।मार्जिन नकारात्मक मान स्वीकार करते हैं, जो तत्वों को एक-दूसरे की ओर खींचते हैं और कभी-कभी उपयोगी होते हैं (जैसे, कंटेनर को माता-पिता के padding के «बाहर» विस्तारित करना)। हालाँकि, नकारात्मक मार्जिन भ्रामक ओवरलैप बगों का एक लगातार स्रोत हैं। उन्हें जानबूझकर उपयोग करें, अपने कोड पर टिप्पणी करें, और संभव होने पर CSS Grid/Flexbox पोजिशनिंग को प्राथमिकता दें। नकारात्मक padding अमान्य CSS है और ब्राउज़रों द्वारा अनदेखा किया जाता है।
• Padding + बॉर्डर + कंटेंट > कंटेनर।जब कंटेंट + padding + बॉर्डर का योग माता-पिता की उपलब्ध चौड़ाई से अधिक हो जाता है, तत्व overflow करता है। सामान्य समाधान: box-sizing: border-box, width मान कम करना, माता-पिता पर overflow: hidden का उपयोग करना (overflow क्लिप करना), या निहित min-width: auto व्यवहार को ओवरराइड करने के लिए flex बच्चों पर min-width: 0। कई «मोबाइल पर लेआउट टूटता है» बग बॉक्स-मॉडल गणित के कारण overflow हैं।

गोपनीयता: सब कुछ आपके ब्राउज़र में चलता है

CSS सीखने और विज़ुअलाइज़ेशन उपकरण दो स्वादों में आते हैं: क्लाइंट-साइड JavaScript चलाने वाले सरल HTML पृष्ठ (निजी, तेज़, कोई सेटअप नहीं) और सहेजी गई परियोजनाओं के साथ क्लाउड संपादक (सहयोगी लेकिन गोपनीयता ट्रेड-ऑफ के साथ)। यह उपकरण पहले प्रकार का है। आपके दर्ज मान, आपकी box-sizing टॉगल स्थिति, आपका उत्पन्न CSS: सभी आपके ब्राउज़र सत्र में रहते हैं। पृष्ठ ताज़ा करें और स्थिति चली जाती है जब तक आपने CSS पहले कॉपी नहीं किया।

यहाँ गोपनीयता दांव कम हैं क्योंकि बॉक्स मॉडल मान शायद ही कभी संवेदनशील जानकारी रखते हैं। फिर भी, एनालिटिक्स की कमी मायने रखती है: आप अपने ट्रायल-एंड-एरर प्रक्रिया रिकॉर्ड किए बिना स्वतंत्र रूप से प्रयोग कर सकते हैं। विशेष रूप से कक्षा या कॉर्पोरेट प्रशिक्षण सेटिंग्स में उपयोगी जहाँ छात्रों या प्रशिक्षुओं को तृतीय-पक्ष प्लेटफ़ॉर्म पर खाते पंजीकृत करना घर्षण बिंदु है। यह बिना बैकएंड के एक एकल स्थिर पृष्ठ है, जो किसी भी ब्राउज़र में उपयोग योग्य है, जिसमें लॉक-डाउन एंटरप्राइज़ मशीनें शामिल हैं।

जब कोई दूसरा उपकरण सही विकल्प हो

• लाइव डीबगिंग के लिए ब्राउज़र DevTools।Chrome और Firefox DevTools में एक बॉक्स मॉडल पैनल शामिल है जो लाइव पेज पर किसी भी चयनित तत्व के लिए चार बॉक्स मान प्रदर्शित करता है। मानों को इनलाइन संपादित करें और पृष्ठ को अपडेट होते देखें। वास्तविक पेज लेआउट डीबग करने के लिए (अमूर्त बॉक्स-मॉडल अन्वेषण नहीं), DevTools इस उपकरण से बेहतर है क्योंकि यह वास्तविक CSS कैस्केड और वंशानुक्रम के साथ आपके वास्तविक कोड पर काम करता है।
• डिज़ाइन-स्पेक आउटपुट के लिए Figma।डिज़ाइनर सटीक पिक्सेल माप के साथ घटकों को लेआउट करने के लिए Figma, Sketch या Adobe XD का उपयोग करते हैं। डिज़ाइन उपकरण का निरीक्षण पैनल मार्जिन और padding मानों का निर्यात करता है जिन्हें डेवलपर्स CSS में अनुवाद करते हैं। डिज़ाइन-से-विकास हैंडऑफ़ के लिए, डिज़ाइन उपकरण सत्य का स्रोत है; यह विज़ुअलाइज़र CSS व्यवहार को समझने के लिए है, उत्पादन घटक स्पेक्स उत्पन्न करने के लिए नहीं।
• घटक एनकैप्सुलेशन के लिए CSS-in-JS।styled-components, Emotion, vanilla-extract या समान CSS-in-JS समाधानों के साथ घटक पुस्तकालय बनाते समय, बॉक्स मॉडल प्रत्येक घटक के भीतर एनकैप्सुलेट किया जाता है। सबसे बाहरी रैपर पर मार्जिन, अंदर padding। यह विज़ुअलाइज़र एक व्यक्तिगत घटक की ज्यामिति के बारे में तर्क करने में मदद करता है; पुस्तकालय घटकों के बीच लेआउट समन्वय को संभालता है।
• लेआउट के लिए CSS Grid/Flexbox उपकरण।बहु-तत्व लेआउट (पेज ग्रिड, कार्ड गैलरी, नेविगेशन बार) के लिए, CSS Grid और Flexbox सही अमूर्तता हैं, न कि केवल बॉक्स मॉडल। हमारे Flexbox Generator और CSS Grid Generator उपकरण उन लेआउट के साथ सीधे मदद करते हैं। बॉक्स मॉडल आधुनिक लेआउट के लिए आवश्यक है लेकिन पर्याप्त नहीं; सही पैमाने के लिए सही उपकरण का उपयोग करें।

अधिक अक्सर पूछे जाने वाले प्रश्न

क्या मुझे यूनिवर्सल * { box-sizing: border-box } का उपयोग करना चाहिए?

अधिकांश परियोजनाओं के लिए, हाँ। Paul Irish का 2012 का प्रस्ताव अब उद्योग डिफ़ॉल्ट है और इस तरह संरेखित है जैसे अधिकांश डेवलपर्स width और height के काम करने की अपेक्षा करते हैं। Bootstrap, Tailwind, Bulma और Material UI जैसे फ्रेमवर्क border-box को डिफ़ॉल्ट के रूप में शिप करते हैं। 2026 में शुरू होने वाली आधुनिक परियोजनाओं को अपने रीसेट के शीर्ष पर *, *::before, *::after { box-sizing: border-box; } सेट करना चाहिए, और शायद ही कभी box-sizing के बारे में फिर से सोचने की आवश्यकता हो। उन व्यक्तिगत तत्वों के लिए content-box के लिए विशिष्ट ओवरराइड संभव हैं जहाँ border-box चीजों को खराब कर देगा।

मेरा मार्जिन भाई-बहनों को धकेलने के बजाय माता-पिता को नीचे क्यों धकेलता है?

यह मार्जिन कोलैप्सिंग है। जब बच्चे का ऊपरी मार्जिन माता-पिता के ऊपरी किनारे से मिलता है जिसमें उनके बीच कोई padding/बॉर्डर नहीं होता, बच्चे का मार्जिन «बच निकलता है» और इसके बजाय माता-पिता पर लागू होता है। समाधान: माता-पिता पर padding-top: 1px जोड़ें (कोई भी मान काम करता है), border: 1px solid transparent जोड़ें, माता-पिता को flex या grid कंटेनर के रूप में सेट करें (उन मोड में कोलैप्सिंग दबा दी जाती है), या माता-पिता पर display: flow-root का उपयोग करें (आधुनिक स्पष्ट «नया ब्लॉक स्वरूपण संदर्भ स्थापित करें» नियम)। ये सभी मार्जिन को कोलैप्स होने से रोकते हैं।

margin: auto और margin: 0 के बीच क्या अंतर है?

margin: 0 का अर्थ है कोई मार्जिन नहीं; तत्व अपने पड़ोसियों के साथ फ्लश बैठता है। margin: auto का अर्थ है कि ब्राउज़र शेष क्षैतिज स्थान वितरित करने के लिए मार्जिन की गणना करता है, आमतौर पर ब्लॉक तत्व को केंद्रित करने के लिए उपयोग किया जाता है: margin-left: auto; margin-right: auto; शेष स्थान को समान रूप से विभाजित करता है। margin: auto auto auto auto (या शॉर्टहैंड margin: auto) flex कंटेनर के अंदर क्षैतिज और लंबवत दोनों रूप से केंद्रित करता है। flex/grid के बाहर, केवल क्षैतिज auto मार्जिन काम करते हैं।

outline border से कैसे भिन्न है?

Outline एक तत्व के चारों ओर खींचा जाता है लेकिन बॉक्स मॉडल के बाहर है: यह तत्व के आकार में नहीं जोड़ता और पड़ोसियों को नहीं धकेलता। Border बॉक्स मॉडल का हिस्सा है और रेंडर किए गए आकार में जोड़ता है। Outline आमतौर पर फोकस रिंग्स (:focus-visible outlines) के लिए उपयोग किया जाता है जहाँ आप लेआउट को स्थानांतरित किए बिना एक दृश्य संकेतक चाहते हैं। Border का उपयोग तब किया जाता है जब रेखा को तत्व की संरचना का हिस्सा होना चाहिए। वैकल्पिक फोकस संकेतक प्रदान किए बिना outline: none को न हटाएँ; ऐसा करने से कीबोर्ड पहुँच टूट जाती है।

margin-inline-start जैसे तार्किक गुणों का उपयोग क्यों करें?

तार्किक गुण (margin-block-start, padding-inline, आदि) दस्तावेज़ की लेखन दिशा के अनुकूल होते हैं। अंग्रेज़ी (बाएँ-से-दाएँ) में, margin-inline-start margin-left के समान है। अरबी या हिब्रू (दाएँ-से-बाएँ) में, यह स्वचालित रूप से margin-right बन जाता है। कई भाषाओं का समर्थन करने वाली साइटों के लिए, तार्किक गुण CSS अंतर्राष्ट्रीयकरण को स्वचालित बनाते हैं। केवल अंग्रेज़ी साइटों के लिए, वे प्रभाव में समतुल्य हैं लेकिन इरादा अधिक स्पष्ट रूप से संकेत देते हैं: «यह मार्जिन टेक्स्ट प्रवाह की शुरुआत में है» के बजाय «यह मार्जिन बाईं ओर है»।

मैं एक निश्चित-पहलू-अनुपात बॉक्स कैसे बनाऊँ?

आधुनिक तरीका aspect-ratio CSS गुण है: div पर aspect-ratio: 16/9 उसकी ऊँचाई को स्वचालित रूप से उसकी चौड़ाई का 9/16 बनाता है। सभी आधुनिक ब्राउज़रों (2021+) में समर्थित। विरासत तकनीक प्रतिशत के रूप में padding-top का उपयोग करती है: padding-top: 56.25% वाला div 16:9 अनुपात (9/16 = 56.25%) बनाता है। padding-top ट्रिक अभी भी काम करती है लेकिन गुण वाक्यविन्यास साफ है। नए कोड के लिए aspect-ratio का उपयोग करें; विरासत हैक Tailwind और अन्य उपकरणों में बना रहता है जिन्हें व्यापक ब्राउज़र समर्थन की आवश्यकता होती है।