एक फ्रंटएंड डेवलपर के रूप में, सीएसएस बॉक्स मॉडल को समझना पिक्सेल-परफेक्ट लेआउट देने में सक्षम होने के लिए मेक-या-ब्रेक है। आइए गहराई से देखें और चर्चा करें कि कैसे इनलाइन और ब्लॉक तत्व दो बॉक्स मॉडल प्रकारों-कंटेंट-बॉक्स और बॉर्डर-बॉक्स के संदर्भ में अलग-अलग व्यवहार करते हैं।

मूल बातें: बॉक्स में क्या है?

इससे पहले कि हम विवरण में जाएं, यह देखना उचित होगा कि बॉक्स मॉडल क्या है। आपके पृष्ठ पर प्रत्येक तत्व एक बॉक्स है (हाँ, वे भी जो वास्तव में आकार में बॉक्स जैसे नहीं लगते हैं)। बक्से अन्य बक्सों के भीतर, युक्त और/या बगल में हो सकते हैं।

बॉक्स मॉडल उन सभी पर लागू होता है और इसमें शामिल हैं:

• सामग्री बॉक्स: एक HTML तत्व या सीएसएस छद्म-तत्व जिसमें आपकी वास्तविक सामग्री रहती है—पाठ, चित्र, आपके पास क्या है।
• पैडिंग: आपकी सामग्री और बॉर्डर के बीच का स्थान।
• सीमा: पैडिंग और सामग्री के चारों ओर लपेटने वाली रेखा।
• मार्जिन: सीमा के बाहर का स्थान जो अन्य तत्वों को दूर धकेलता है।

इसलिए

के भीतर और उसके भीतर लगभग हर HTML तत्व, और प्रत्येक CSS छद्म-तत्व, एक बॉक्स है। उस बॉक्स की "दीवारें" आपकी सीमा हैं, और उन्हें मोटाई (या चौड़ाई) दी जा सकती है। उस सामग्री और उस बॉक्स की दीवारों के बीच आपके पास पैडिंग है। उन दीवारों और अन्य बक्से के बीच, आपके पास मार्जिन है।

इनलाइन और ब्लॉक तत्वों के बीच मुख्य अंतर

बॉक्स मॉडल इनलाइन बनाम ब्लॉक तत्वों को कैसे प्रभावित करता है, इसके मुख्य अंतर को समझना महत्वपूर्ण है:

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

2. ऊंचाई: ब्लॉक तत्वों के लिए, पैडिंग, बॉर्डर और मार्जिन सभी ऊंचाई बढ़ा देंगे। ऊर्ध्वाधर पैडिंग या सीमाओं की परवाह किए बिना, इनलाइन तत्व लाइन की ऊंचाई के भीतर रहते हैं।

3. लेआउट प्रभाव: ब्लॉक तत्व क्षैतिज और ऊर्ध्वाधर दोनों लेआउट को प्रभावित करते हैं। इनलाइन तत्व क्षैतिज प्रवाह के बारे में हैं, ऊर्ध्वाधर रिक्ति पर न्यूनतम प्रभाव डालते हैं।

4. मार्जिन ढहना: मार्जिन ढहना ब्लॉक तत्वों के लिए विशिष्ट व्यवहार है, जहां आसन्न लंबवत मार्जिन विलय हो सकता है (इसलिए एक तत्व पर मार्जिन-बॉटम:20px मार्जिन-टॉप में ढह सकता है: निम्नलिखित तत्व पर 20px, एक 20px मार्जिन बनाना)। इनलाइन तत्व इस गेम को नहीं खेलते हैं।

अब जब हम बॉक्स मॉडल के घटकों और इनलाइन और ब्लॉक तत्वों के बीच अंतर को जानते हैं, तो आइए देखें कि सामग्री बॉक्स बॉक्स-आकार की संपत्ति से कैसे प्रभावित होते हैं, चाहे वे इनलाइन या ब्लॉक तत्व हों।

बॉक्स-आकार: सामग्री-बॉक्स बनाम बॉर्डर-बॉक्स

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

1. इनलाइन तत्वों के साथ सामग्री-बॉक्स

बॉक्स-आकार देते समय: सामग्री-बॉक्स को इनलाइन तत्व पर लागू किया जाता है:

• चौड़ाई और ऊंचाई: चौड़ाई पूरी तरह से सामग्री द्वारा निर्धारित की जाती है। इस चौड़ाई के शीर्ष पर पैडिंग, बॉर्डर और मार्जिन जोड़े जाते हैं।
• लेआउट प्रभाव: चूंकि इनलाइन तत्व पाठ के प्रवाह को नहीं तोड़ते हैं, तत्व की चौड़ाई केवल सामग्री जितनी चौड़ी होती है। लंबवत पैडिंग और बॉर्डर दृश्यमान रूप से मौजूद हैं, लेकिन आसपास की रेखा की ऊंचाई को प्रभावित नहीं करते हैं।

2. ब्लॉक तत्वों के साथ सामग्री-बॉक्स

बॉक्स-आकार देते समय: सामग्री-बॉक्स को ब्लॉक तत्व पर लागू किया जाता है:

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

3. इनलाइन तत्वों के साथ बॉर्डर-बॉक्स

जब बॉक्स-आकार: बॉर्डर-बॉक्स को इनलाइन तत्व पर लागू किया जाता है:

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

4. ब्लॉक तत्वों के साथ बॉर्डर-बॉक्स

जब बॉक्स-आकार: बॉर्डर-बॉक्स को ब्लॉक तत्व पर लागू किया जाता है:

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

यह कहने लायक है कि हालांकि कंटेंट-बॉक्स डिफ़ॉल्ट है, बॉर्डर-बॉक्स को व्यापक रूप से अधिक सहज माना जाता है और नियंत्रण की सबसे बड़ी डिग्री प्रदान करता है।

---

सीएसएस बॉक्स मॉडल सिर्फ एक शक्तिशाली अवधारणा नहीं है - यह आपके फ्रंटएंड विकास शस्त्रागार में एक मूलभूत उपकरण है। यह समझकर कि बॉक्स-साइज़िंग इनलाइन और ब्लॉक तत्वों को अलग-अलग तरीके से कैसे प्रभावित करती है, आप दोषरहित लेआउट बनाना शुरू कर सकते हैं जो गलत व्यवहार करने वाले लेआउट की समस्या निवारण की परेशानी के बिना तेज और कार्यात्मक दोनों हैं।

यदि आपने बॉक्स मॉडल पर इस डाउनलोड का आनंद लिया है, तो ऊपर बाईं ओर उस दिल के आकार वाले बॉक्स पर जाएं और इस पोस्ट को पूरा प्यार दिखाएं!