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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected];500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<title>CSS Box Model</title>
</head>
<body>
<img class="content-box display" src="img/second-content-image.jpg" alt="smartphone">
<img class="content-box" src="img/content-image.jpg" alt="clock">
</body>
</html>

आउटपुट:

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

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

 /*************************
BASIC STYLING
*************************/
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: row;
}
.display {
display: none !important;
}

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

 /*************************
CONTENT BOX
*************************/
.content-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* Styling the content box using height and width properties */
background-color: #fdf;
height: 20em;
width: 30em;
}

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

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

 /*************************
PADDING
*************************/
/* Applying padding */
padding-top: 5em;
padding-right: 2em;
padding-bottom: 8em;
padding-left: 2em;

/* Padding shorthand */

/* top/right/bottom/left */
padding: 5em 2em 8em 2em;

/* top/horizontal/bottom */
padding: 5em 2em 8em;

आउटपुट:

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

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

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

 /*************************
BORDER
*************************/
/* Applying border properties */
/* Set the border color */
border-color: rgb(148, 234, 255);
/* Select border style */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: groove;
border-left-style: ridge;

/* border-style shorthand */
/* top/right/bottom/left */
border-style: solid dashed groove ridge;

/* Set border width */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;

/* border-width shorthand*/
/* top/right/bottom/left */
border-width: 4em 2em 2em 2em;

/* top/horizontal/bottom */
border-width: 4em 2em 2em;

/* border property shorthand */
/* border: 4em solid rgb(148, 234, 255); */

/* Set border-radius */
border-radius: 5em;
border-radius: 20%;

आउटपुट:

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

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

 /*************************
MARGIN
*************************/
/* Applying margin properties */
margin-top: 4em;
margin-right: 5em;
margin-bottom: 3em;
margin-left: 5em;

/* Margin shorthand */
/* top/right/bottom/left */
margin: 4em 5em 3em 5em;
/* top/horizontal/bottom */
margin: 4em 5em 3em;

/* Using auto margin */
margin: 3em auto;

आउटपुट:

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

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

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

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

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

 /* .display {
display: none !important;
} */
.content-box {
display: flex;
flex-direction: row;
align-items: center;
background-color: #fdf;
height: 20em;
width: 30em;
padding: 5em 2em 8em;
border-style: solid dashed groove ridge;
border-width: 4em 2em 2em;
border-radius: 20%;

/* Using negative margin */
margin: 3em -20em 3em 5em;
}

आउटपुट:

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

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

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