Components: Content, Padding, Border, Margin In Hindi
एचटीएमएल वेब पेज में सीएसएस स्क्रिप्ट स्टाइल का उपयोग कर वेब पेज में टेक्स्ट और अन्य पेज एलिमेंट को बॉक्स मॉडल में इन्सर्ट और मैनेज कर सकते है. सामान्यता, सीएसएस स्क्रिप्टिंग स्टाइलिंग में बॉक्स मॉडल में 4 मुख्य कम्पोनेंट होते है. जैसे, वेब पेज कंटेंट, बॉक्स पैडिंग, बॉक्स बॉर्डर, और बॉक्स मार्जिन, ऐट्रिब्यूट्स आदि है. जहा बॉक्स मॉडल सीएसएस ऐट्रिब्यूट्स को एचटीएमएल वेब डेवलपर सीएसएस इफेक्टिव और रेस्पॉन्सिव वेब डेवलपमेंट के लिए बॉक्स मॉडल कम्पोनेंट को एचटीएमएल वेब पेज डेवलपमेंट में उपयोग करते है।
So, let’s know the box model and its components in HTML web page.
Box model content attributes.
वेब डेवलपमेंट में किसी पर्टिकुलर एचटीएमएल वेब पेज एलिमेंट बॉक्स मॉडल डिजिटल कंटेंट या ऑब्जेक्ट के लिए एक रिजर्व्ड प्लेस है. जिसमे मौजूदा वेब पेज में डिस्प्ले एचटीएमएल वेब पेज एलिमेंट डिजिटल कंटेंट, इमेजेज, मल्टीमीडिया ऑब्जेक्ट, को बॉक्स मॉडल अपने अंदर समाहित कर प्रीव्यू करता है।
Box model content example in basic CSS.
.box-model {
width: 200px;
height: 200px;
padding: 40px; /* it set space among content and border */
border: 4px solid lime; /* display border around the box */
margin: 40px; /* display space outside the box */
background-color: aqua; /* display box model background color */
}
css padding attributes.
एचटीएमएल वेब पेज में सीएसएस बॉक्स मॉडल पैडिंग बॉक्स कंटेंट इनफार्मेशन और बॉक्स बॉर्डर के मध्य पैडिंग में प्रीव्यू होने वाली एम्प्टी स्पेस है। जहा यह मौजूदा सीएसएस बॉक्स मॉडल में प्रीव्यू कंटेंट के चारो तरफ पैडिंग स्पेस को क्रिएट करता है जिससे की वेब पेज टेक्स्ट बॉक्स मॉडल बॉर्डर से डिफरेंट और अलग प्रीव्यू होता है।
Box padding model example in basic CSS.
पैडिंग डायमेंशन वेब पेज में डिस्प्ले बॉक्स मॉडल पैडिंग सीएसएस ऐट्रिब्यूट्स वेब पेज में प्रीव्यू डिजिटल कंटेंट को टॉप, बॉटम, लेफ्ट, राइट, से पैडिंग स्पेस को एडजस्ट कर प्रीव्यू करता है।
Box model padding example in basic CSS.
.box-model {
padding: 40px; /* it set space among content and border */
}
बॉक्स मॉडल में चारो साइड के पैडिंग स्पेस के लिए मैन्युअल पैडिंग ऐट्रिब्यूट्स को डिस्प्ले कर सकते है.
.box-model {
padding: 12px 22px 20px 10px; /* it set space among content and border from left, right, top, and bottom */
}
Box model border attributes.
डिज़ाइन एचटीएमएल वेब पेज में बॉक्स मॉडल बॉर्डर पैडिंग और वेब पेज कंटेंट स्पेस को चारो तरफ से सर्राउंड करता है। जहा आप मौजूदा वेब पेज बॉक्स की विड्थ, कलर और सीएसएस स्टाइल में सॉलिड बॉर्डर, डेश बॉर्डर, डेश डॉटेड बॉर्डर, आदि फॉर्मट में बॉक्स बॉर्डर एट्रिब्यूट और स्टाइल किया जा सकता है.
बॉक्स मॉडल बॉर्डर डायमेंशन से आप मौजूदा कंटेंट के रूप में बॉर्डर, बॉर्डर-विड्थ, बॉर्डर-स्टाइल और बॉर्डर-कलर आदि ऐट्रिब्यूट्स को मैनेज और कण्ट्रोल किया जाता है।
Box model border example in basic CSS.
.box-model {
border: 4px solid lime; /* display border around the box */
}
Box model margin attributes.
मौजूदा एचटीएमएल वेब पेज में मार्जिन टेक्स्ट एलिमेंट की लोकेशन सीमा के बाहर स्पेस है। यह एचटीएमएल वेब पेज एलिमेंट के बीच सेपरशन को प्रीव्यू करता है, जिससे वेब पेज लेआउट में टेक्स्ट स्पेसिंग को कण्ट्रोल और आसानी से मैनेज किया जाता है।
बॉक्स मार्जिन डायमेंशन ऐट्रिब्यूट्स में वेब पेज ऑब्जेक्ट मार्जिन प्रॉपर्टीज द्वारा कण्ट्रोल किया जाता है, यहाँ यह बॉक्स मॉडल के चारो तरफ मार्जिन स्पेस के साथ प्रीव्यू करता है।
Box model margin example in basic CSS.
.box-model {
margin: 40px; /* display space outside the box */
}
एचटीएमएल वेब डेवलपर अपनी वेब पेज बॉक्स मॉडल मार्जिन जरूरत के अनुसार चारो तरफ से अलग अलग मार्जिन एडजस्ट और डिस्प्ले कर सकते हैं.
.box-model {
margin: 10px 14px 19px 24px; /* display space outside the box */
}
All box model component examples in css.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Box Model Scripting Code </title>
<style>
.box-properties {
color: red;
text-align: center;
font-size: 20px;
width: 170px;
height: 140px;
padding: 40px; /* it set space among content and border */
border: 4px dotted brown; /* display border around the box */
margin: 40px; /* display space outside the box */
background-color: aqua; /* display box model background color */
}
.box-attribute {
color: White;
text-align: center;
font-size: 20px;
width: 200px;
height: 200px;
padding: 10px 10px 10px 10px;; /* it set space among content and border */
border: 4px solid yellow; /* display border around the box */
margin: 10px 14px 19px 24px; /* display space outside the box */
background-color: brown; /* display box model background color */
}
</style>
</head>
<body>
<div class=”box-properties”>
This Is The Other Box Model Class Selector Example Code In Css.
</div>
<div class=”box-attribute”>
You See The Css Box Model With Multiple Content And Other Attributes.
</div>
</body>
</html>
box-model all attributes explanation.
- Box model content – बॉक्स मॉडल में टेक्स्ट और मीडिया ऑब्जेक्ट एलिमेंट प्रीव्यू होते है।
- Box model padding – वेब पेज में कंटेंट और बॉक्स बॉर्डर के मध्य की स्पेस है।
- Box model border – वेब पेज में बॉक्स मॉडल पैडिंग और कंटेंट बॉर्डर को सर्राउंड करता है।
- Box model margin – वेब पेज टेक्स्ट और बॉक्स बॉर्डर के बाहर की जगह है, यह वेब एलिमेंट को दूसरे ऑब्जेक्ट से डिफरेंट प्रीव्यू करता है।
