CSS बॉक्स मॉडल को उदाहरणों के साथ समझाया गया

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

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

CSS बॉक्स मॉडल द्वारा बनाया गया एक मानक है विश्वव्यापी वेब संकाय. यह HTML दस्तावेज़ के सभी तत्वों को अपने स्वयं के आयामों के साथ आयताकार बक्से के रूप में वर्णित करता है। इन बक्सों में एक सामग्री क्षेत्र और वैकल्पिक आसपास के मार्जिन, सीमा और पैडिंग क्षेत्र होते हैं। तो, आइए CSS बॉक्स के कुछ हिस्सों को देखें।

आइए CSS बॉक्स मॉडल की चार परतों को उजागर करें।

पहली परत: सामग्री

सामग्री क्षेत्र में तत्व की मुख्य सामग्री होती है जो एक छवि, पाठ या मीडिया सामग्री का कोई भी रूप हो सकता है। आप ब्लॉक-स्तरीय तत्वों के आयामों का उपयोग करके संशोधित कर सकते हैं ऊंचाई तथा चौड़ाई गुण।

दूसरी परत: पैडिंग

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

तीसरी परत: सीमा

बॉर्डर सामग्री और पैडिंग क्षेत्र को लपेटता है। आप सीमा का आकार बदल सकते हैं और शैली का उपयोग कर सकते हैं सीमा चौड़ाई, झालर की शैली, तथा सीमा रंग गुण।

चौथी परत: मार्जिन

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

CSS बॉक्स मॉडल के लिए प्रोजेक्ट सेटअप

आइए सामग्री बॉक्स और पैडिंग, बॉर्डर और मार्जिन गुणों के साथ मूल बॉक्स मॉडल को प्रदर्शित करने के लिए एक मिनी प्रोजेक्ट बनाएं। आप पाठ, छवि या मीडिया सामग्री के साथ जा सकते हैं। हम यह सुनिश्चित करके शुरू करेंगे कि यह ठीक से संरचित है।

HTML के साथ संरचना

आउटपुट:

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

CSS का उपयोग करके स्टाइलिंग

/*************************
बेसिक स्टाइलिंग
*************************/
* {
मार्जिन: 0px;
पैडिंग: 0px;
}
तन {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
} 
.प्रदर्शन {
प्रदर्शन: कोई नहीं! महत्वपूर्ण;
}

अब, हमारे कंटेंट बॉक्स को स्टाइल करते हैं। सबसे पहले, हम सेट करेंगे ऊंचाई तथा चौड़ाई छवि का। साथ ही, बैकग्राउंड कलर देने से बेहतर विज़ुअलाइज़ेशन में मदद मिलती है। तो ये करते है।

/*************************
सामग्री बॉक्स
*************************/
सामग्री-बॉक्स {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
/* ऊंचाई और चौड़ाई के गुणों का उपयोग करके सामग्री बॉक्स को स्टाइल करना */
पृष्ठभूमि-रंग: #fdf;
ऊंचाई: 20em;
चौड़ाई: 30em;
}

पैडिंग के साथ सांस लेने के लिए सामग्री कक्ष दें

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

 /*************************
गद्दी
*************************/
/* पैडिंग लगाना */
पैडिंग-टॉप: 5em;
गद्दी-दाएं: 2em;
पैडिंग-बॉटम: 8em;
पैडिंग-बाएं: 2em;
/* पैडिंग शॉर्टहैंड */
/* ऊपर/दाएं/नीचे/बाएं */
पैडिंग: 5em 2em 8em 2em;
/* ऊपर/क्षैतिज/नीचे */
पैडिंग: 5em 2em 8em;

आउटपुट:

बॉर्डर का उपयोग करके पैडिंग के चारों ओर रेखाएँ खींचना

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

आप भी सेट कर सकते हैं बॉर्डर-त्रिज्या बॉक्स को गोलाकार कोनों में त्रिज्या के साथ देने के लिए पिक्सल, रेमो, एम, या प्रतिशत।

 /*************************
बॉर्डर
*************************/
/* सीमा गुण लागू करना */
/* बॉर्डर का रंग सेट करें */
सीमा-रंग: आरजीबी (148, 234, 255);
/* सीमा शैली चुनें */
सीमा-शीर्ष-शैली: ठोस;
सीमा-दाएँ-शैली: धराशायी;
सीमा-नीचे-शैली: नाली;
सीमा-बाएं-शैली: रिज;
/* बॉर्डर-स्टाइल शॉर्टहैंड */
/* ऊपर/दाएं/नीचे/बाएं */
सीमा-शैली: ठोस धराशायी नाली रिज;
/* सीमा की चौड़ाई निर्धारित करें */
सीमा-शीर्ष-चौड़ाई: 4em;
सीमा-दाएं-चौड़ाई: 2em;
सीमा-नीचे-चौड़ाई: 2em;
सीमा-बाएं-चौड़ाई: 2em;
/*बॉर्डर-चौड़ाई शॉर्टहैंड*/
/* ऊपर/दाएं/नीचे/बाएं */
सीमा-चौड़ाई: 4em 2em 2em 2em;
/* ऊपर/क्षैतिज/नीचे */
सीमा-चौड़ाई: 4em 2em 2em;
/* सीमा संपत्ति आशुलिपि */
/* बॉर्डर: 4em सॉलिड आरजीबी (148, 234, 255); */
/* सीमा-त्रिज्या सेट करें */
सीमा-त्रिज्या: 5em;
सीमा-त्रिज्या: 20%;

आउटपुट:

मार्जिन वाले बक्सों के बीच जगह जोड़ें

आप एक बॉक्स को क्षैतिज रूप से उपयोग करके केन्द्रित कर सकते हैं मार्जिन: 0 ऑटो, बशर्ते इसकी एक निश्चित चौड़ाई हो।

 /*************************
मार्जिन
*************************/
/* मार्जिन गुण लागू करना */
मार्जिन-टॉप: 4em;
मार्जिन-दाएं: 5em;
मार्जिन-नीचे: 3em;
मार्जिन-बाएं: 5em;
/* मार्जिन शॉर्टहैंड */
/* ऊपर/दाएं/नीचे/बाएं */
मार्जिन: 4em 5em 3em 5em;
/* ऊपर/क्षैतिज/नीचे */
मार्जिन: 4em 5em 3em;
/* ऑटो मार्जिन का उपयोग करना */
मार्जिन: 3em ऑटो;

आउटपुट:

आप एक, दो, तीन या चार मानों का उपयोग करके मार्जिन गुण निर्दिष्ट कर सकते हैं। मान लंबाई, प्रतिशत या कीवर्ड हो सकते हैं जैसे ऑटो. आइए समझते हैं कि यह कैसे काम करता है:

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

ध्यान दें कि आप इन शॉर्टकट का उपयोग पैडिंग और बॉर्डर प्रॉपर्टी के लिए भी कर सकते हैं।

यह सभी देखें: आवश्यक CSS3 गुण पत्रक धोखा

क्या आपने कभी नकारात्मक मार्जिन का उपयोग किया है? इसे देखने के लिए आइए मिटा दें कुछ भी डिस्प्ले मत करो हमारी दूसरी छवि प्रदर्शित करने के लिए, फिर एक नकारात्मक मार्जिन सेट करें।

/* .डिस्प्ले {
प्रदर्शन: कोई नहीं! महत्वपूर्ण;
} */
सामग्री-बॉक्स {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
संरेखित-आइटम: केंद्र;
पृष्ठभूमि-रंग: #fdf;
ऊंचाई: 20em;
चौड़ाई: 30em;
पैडिंग: 5em 2em 8em;
सीमा-शैली: ठोस धराशायी नाली रिज;
सीमा-चौड़ाई: 4em 2em 2em;
सीमा-त्रिज्या: 20%;
/* नकारात्मक मार्जिन का उपयोग करना */
मार्जिन: 3em -20em 3em 5em;
}

आउटपुट:

द बॉक्स मॉडल: एक पिक्सेल परफेक्ट वेबसाइट बनाना

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

आपको यह समझना चाहिए कि CSS में सामग्री को बाहर करने के अन्य तरीके भी हैं। इनमें सीएसएस ग्रिड और सीएसएस फ्लेक्सबॉक्स शामिल हैं। एक बार जब आप बॉक्स मॉडल के साथ सहज हो जाते हैं, तो आपको इन विकल्पों के बारे में सीखना जारी रखना चाहिए।

सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल: मूल बातें

CSS Flexbox की मदद से अपने HTML तत्वों को पूरी तरह से व्यवस्थित करें।

आगे पढ़िए

लेखक के बारे में