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

CSS बॉक्स मॉडल क्या है?

सीएसएस बॉक्स मॉडल एक वैचारिक ढांचा है जो बताता है कि वेबपेज के तत्वों को कैसे संरचित और प्रस्तुत किया जाता है। इसमें चार घटक होते हैं: सामग्री, पैडिंग, बॉर्डर और मार्जिन। इनमें से प्रत्येक घटक किसी तत्व के समग्र स्वरूप और अंतर में महत्वपूर्ण भूमिका निभाता है।

बॉक्स मॉडल के चार घटक

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

• पैडिंग बॉक्स: पैडिंग सामग्री और बॉर्डर के बीच का स्थान है। यह सामग्री के चारों ओर एक आंतरिक कुशन बनाता है, जिससे यह सुनिश्चित होता है कि सामग्री सीधे सीमा को नहीं छूती है। पैडिंग को पैडिंग प्रॉपर्टी का उपयोग करके सेट किया जा सकता है, और इसमें प्रत्येक पक्ष (ऊपर, दाएं, नीचे और बाएं) के लिए अलग-अलग मान हो सकते हैं।

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

• मार्जिन बॉक्स: मार्जिन बॉक्स की सबसे बाहरी परत है, जो तत्व और उसके पड़ोसी तत्वों के बीच जगह बनाती है। मार्जिन मार्जिन प्रॉपर्टी का उपयोग करके सेट किए जाते हैं और प्रत्येक पक्ष के लिए अलग-अलग मान भी हो सकते हैं।

बॉक्स मॉडल का दृश्य प्रतिनिधित्व

सीएसएस बॉक्स मॉडल को बेहतर ढंग से समझने में आपकी सहायता के लिए यहां एक दृश्य प्रतिनिधित्व दिया गया है:

 ------------------------------- 
|            Margin             |
|   -------------------------   |
|  |         Border          |  |
|  |   -------------------   |  |
|  |  |     Padding       |  |  |
|  |  |   -------------   |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |   -------------   |  |  |
|  |   -------------------   |  |
|   -------------------------   |
 ------------------------------- 

सीएसएस गुण और बॉक्स मॉडल

चौड़ाई और ऊंचाई सेट करना

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

.box {
    width: 200px;
    height: 100px;
    box-sizing: content-box; /* Default */
}

.box-border {
    width: 200px;
    height: 100px;
    box-sizing: border-box; /* Includes padding and border in width and height */
}

पैडिंग जोड़ना

पैडिंग तत्व के अंदर, सामग्री के चारों ओर जगह जोड़ता है।

.box {
    padding: 20px; /* Adds 20px padding on all sides */
}

.box-top-bottom {
    padding: 10px 0; /* Adds 10px padding on top and bottom only */
}

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

.box {
    border: 2px solid #333; /* Adds a 2px solid border with a specific color */
}

.box-dashed {
    border: 1px dashed #666; /* Adds a 1px dashed border */
}

मार्जिन प्रबंधित करना
हाशिये तत्व के चारों ओर, सीमा के बाहर जगह बनाते हैं।

.box {
    margin: 20px; /* Adds 20px margin on all sides */
}

.box-horizontal {
    margin: 0 15px; /* Adds 15px margin on left and right only */
}

बॉक्स-आकार वाली संपत्ति

बॉक्स-आकार की संपत्ति यह निर्धारित करती है कि किसी तत्व की कुल चौड़ाई और ऊंचाई की गणना कैसे की जाती है। दो मुख्य मान हैं:

• सामग्री-बॉक्स (डिफ़ॉल्ट): चौड़ाई और ऊंचाई में केवल सामग्री शामिल है। इस बॉक्स के बाहर पैडिंग, बॉर्डर और मार्जिन जोड़े गए हैं।

• बॉर्डर-बॉक्स: चौड़ाई और ऊंचाई में सामग्री, पैडिंग और बॉर्डर शामिल हैं। इस बॉक्स के बाहर अभी भी मार्जिन जोड़े गए हैं।

बॉक्स-आकार का उपयोग करना: बॉर्डर-बॉक्स; अक्सर अधिक पूर्वानुमानित लेआउट के लिए इसकी अनुशंसा की जाती है, खासकर जब प्रतिक्रियाशील डिज़ाइन से निपटते हैं।

* {
    box-sizing: border-box;
}

व्यावहारिक उदाहरण

आइए देखें कि वास्तविक दुनिया के उदाहरण में ये गुण एक साथ कैसे काम करते हैं:

    
    
    
    


    

        
This is a demonstration of the CSS Box Model.
    

इस उदाहरण में, .container तत्व की चौड़ाई 300px, पैडिंग 20px, बॉर्डर 5px और मार्जिन 30px है। तत्व की कुल चौड़ाई की गणना इस प्रकार की जाती है:

Total Width = Content Width   Padding   Border
Total Width = 300px   (20px * 2)   (5px * 2) = 350px

निष्कर्ष

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