Margins and padding (w3-margin, w3-padding) In Hindi.
W3.CSS फ्रेमवर्क कॉम्पोनेन्ट लाइब्रेरी में मार्जिन और पैडिंग क्लास किसी html वेबपेज ऑब्जेक्ट एलिमेंट के आस-पास और ऑब्जेक्ट के इनर साइड में स्पेसिंग को कंट्रोल या मैनेज करने के लिए मार्जिन और पैडिंग क्लास प्रॉपर्टीज को यूज़ किया जाता हैं। वेब डेवलपर W3.CSS फ्रेमवर्क क्लासेज मार्जिन और पैडिंग ऐट्रिब्यूट्स को अप्लाई करने के लिए यूटिलिटी क्लास का एक ग्रुप क्लासेज कलेक्शन प्रोवाइड करता है. जिससे की वेब डेवलपर कस्टम CSS वेब स्क्रिप्ट सोर्स कोड लिखे बिना किसी भी वेबसाइट ऑब्जेक्ट एलिमेंट के लेआउट को इमीडियेट एडजस्टमेंट या अलाइन कर सकते है।
Margin Classes in the W3.CSS Framework.
html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट मार्जिन एलिमेंट के आउटर स्पेस को कंट्रोल और मैनेज करने में हेल्प करते हैं. जिससे मौजूदा वेबपेज ऑब्जेक्ट एलिमेंट के बॉर्डर और आस-पास के एलिमेंट एरिया के बीच गैप क्रिएट होता है। वेब डेवलपर को W3.CSS फ्रेमवर्क में वेबपेज ऑब्जेक्ट मार्जिन को आसानी से एडजस्ट करने के लिए कई मार्जिन और यूटिलिटी क्लास मिलती है।
Margin class details in the W3.CSS framework.
- .w3-margin – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट में एलिमेंट के सभी तरफ और मार्जिन स्पेस को ऐड करता है।
- .w3-margin-top – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के टॉप में मार्जिन स्पेस को ऐड करता है।
- .w3-margin-right – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के राइट साइड में मार्जिन स्पेस को ऐड करता है।
- .w3-margin-bottom – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के बॉटम में मार्जिन स्पेस को ऐड करता है।
- .w3-margin-left – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के लेफ्ट साइड में मार्जिन स्पेस को ऐड करता है।
- .w3-margin-{size} – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट में वेब डेवलपर स्पेशल वेब ऑब्जेक्ट स्पेसिंग के लिए अलग-अलग w3-margin मार्जिन क्लास साइज़ चॉइस प्रोवाइड करता है. जैसे, w3-margin-small, w3-margin-medium, w3-margin-large, आदि को जरूरत के अनुसार मौजूदा वेब पेज ऑब्जेक्ट पे अप्लाई किया जा सकता हैं।
W3.CSS framework common margin class size options.
- .w3-margin-small – यह किसी html वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे छोटा मार्जिन सामान्य रूप से 8px (पिक्सेल) स्पेस को ऐड करता है .
- .w3-margin-medium – यह किसी html वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे मीडियम मार्जिन सामान्य रूप से 16px स्पेस को ऐड करता है.
- .w3-margin-large – यह किसी html वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे लार्ज मार्जिन सामान्य रूप से 32px स्पेस को ऐड करता है.
- .w3-margin-xlarge – यह किसी html वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे एक्स्ट्रा लार्ज मार्जिन सामान्य रूप से 64px स्पेस को ऐड करता है.
- .w3-margin-xxlarge – यह किसी html वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे डबल एक्स्ट्रा लार्ज मार्जिन सामान्य रूप से 128px स्पेस को ऐड करता है.
- .w3-margin-auto – यह किसी html वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट सेटेलमेंट के लिए मार्जिन को ऑटोमैटिकली जरूरत के अनुसार एडजस्ट करता है. स्पेशली रूप से, इसे w3-center मार्जिन क्लास प्रॉपर्टीज के साथ यूज़ किया जाता है।
Example of the W3.CSS framework margin class.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let Explore W3.CSS framework margin class attributes </title>
</head>
<body>
<!– it display Element margin from all object sides –>
<div class=”w3-margin”>
<p>This html text object element have margin from all sides.</p>
</div>
<!– it display Element margin from Top direction –>
<div class=”w3-margin-top”>
<p>This html text object element have margin from top side.</p>
</div>
<!– it display Element margin from Bottom direction –>
<div class=”w3-margin-bottom”>
<p>This html text object element have margin from bottom side.</p>
</div>
<!– it display Element margin from Small direction –>
<div class=”w3-margin-small”>
<p>This html text object element have margin from small margin side.</p>
</div>
<!– it display Element margin from Large Margin direction –>
<div class=”w3-margin-large”>
<p>This html text object element have margin from large margin.</p>
</div>
<!– it display Element margin from Auto Margin Cantering side –>
<div class=”w3-margin-auto w3-center”>
<p>This html text object element have margin from cantered with auto margins side.</p>
</div>
</body>
</html>
Here in this W3.CSS framework margin class example.
- यहाँ फर्स्ट मार्जिन div ब्लॉक में .w3-margin क्लास है, जो मौजूदा ऑब्जेक्ट पे सभी तरफ मार्जिन को ऐड करता है।
- इसी प्रकार सेकंड और थर्ड div टैग ब्लॉक एलिमेंट में टॉप और बॉटम मार्जिन स्पेस ऐड के लिए मार्जिन क्लास डिस्प्ले करते हैं।
- इसी क्रम में फोर्थ और फिफ्थ div ब्लॉक एलिमेंट छोटे और लार्ज मार्जिन क्लास डिस्प्ले करते हैं।
- अंत में, div ब्लॉक .w3-margin-auto और .w3-center क्लास के साथ सेंटर क्लास ऑब्जेक्ट एडजस्टमेंट को डिस्प्ले करता है।
Padding Class Attributes in the W3.CSS Framework.
W3.CSS फ्रेमवर्क कॉम्पोनेन्ट लाइब्रेरी में पैडिंग क्लास किसी html वेबपेज ऑब्जेक्ट पैडिंग किसी एलिमेंट के अंदर, वेब कंटेंट और उसके बॉर्डर के बीच की जगह को मैनेज करने में हेल्प करता है। W3.CSS फ्रेमवर्क पैडिंग स्पेस के लिए आपको कई तरह के यूटिलिटी क्लास प्रोवाइड करता है. जिसे जरूरत पड़ने पर किसी भी वेबपेज ऑब्जेक्ट एलिमेंट पर अप्लाई किया जा सकता है।
Details of the W3.CSS Framework Padding Class.
- .w3-padding – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के सभी तरफ से पैडिंग स्पेस को ऐड करता है।
- .w3-padding-top – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के टॉप लोकेशन पर पैडिंग स्पेस को ऐड करता है।
- .w3-padding-right – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के राइट साइड में पैडिंग स्पेस को ऐड करता है।
- .w3-padding-bottom – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के बॉटम में पैडिंग स्पेस को ऐड करता है।
- .w3-padding-left – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट के लेफ्ट पैडिंग स्पेस को ऐड करता है।
- .w3-padding-{size} – वेब डेवलपर स्पेशल पैडिंग साइज़ इफ़ेक्ट के लिए अलग-अलग पैडिंग साइज़ चॉइस में जैसे, w3-padding-small, w3-padding-medium, w3-padding-large, आदि, क्लास ऐट्रिब्यूट्स को अप्लाई कर सकते हैं।
W3.CSS Framework Padding Class Common size options.
- .w3-padding-small – यह हमें html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे स्माल पैडिंग साइज सामान्य रूप से 8px पिक्सेल डिस्प्ले करने में हेल्प करता है.
- .w3-padding-medium – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे मीडियम पैडिंग साइज सामान्य रूप से 16px पिक्सेल डिस्प्ले करने में हेल्प करता है.
- .w3-padding-large – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे लार्ज पैडिंग साइज सामान्य रूप से 32px पिक्सेल डिस्प्ले करने में हेल्प करता है.
- .w3-padding-xlarge – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे एक्स्ट्रा लार्ज पैडिंग साइज सामान्य रूप सेर 64px पिक्सेल डिस्प्ले करने में हेल्प करता है.
- .w3-padding-xxlarge – यह html डिज़ाइन वेबपेज वेबसाइट ऑब्जेक्ट एलिमेंट पे डबल एक्स्ट्रा लार्ज पैडिंग साइज सामान्य रूप से 128px पिक्सेल डिस्प्ले करने में हेल्प करता है.
Example of W3.CSS Framework padding class.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let Explore W3.CSS framework Padding class attributes </title>
</head>
<body>
<!– it display Element Padding from all sides –>
<div class=”w3-padding”>
<p>This html text object element has padding apply from all sides.</p>
</div>
<!– it display Element with Top Padding –>
<div class=”w3-padding-top”>
<p>This html text object element has padding apply from the top direction.</p>
</div>
<!– it display Element with Bottom Padding –>
<div class=”w3-padding-bottom”>
<p>This html text object element has padding apply from the bottom direction.</p>
</div>
<!– it display Element with Small Padding –>
<div class=”w3-padding-small”>
<p>This html text object element has padding apply from small padding inside direction.</p>
</div>
<!– it display Element with Large Padding –>
<div class=”w3-padding-large”>
<p>This html text object element has padding apply from large padding inside direction.</p>
</div>
</body>
</html>
Here’s the W3.CSS Framework padding class example.
- यहाँ इस एक्साम्प्ल में फर्स्ट div ब्लॉक में .w3-padding स्पेस डिफाइन है, जो मौजूदा वेबपेज ऑब्जेक्ट में सभी तरफ से पैडिंग को ऐड करता है.
- इसी प्रकार के सेकंड और थर्ड div टैग ब्लॉक एलिमेंट टॉप और बॉटम पैडिंग स्पेस के लिए पैडिंग क्लास डिस्प्ले करते हैं. इसी क्रम में फोर्थ और फिफ्थ div ब्लॉक एलिमेंट पर स्माल और लार्ज पैडिंग क्लास ऐट्रिब्यूट्स और इफ़ेक्ट डिस्प्ले कर सकते हैं।
Group example of W3.CSS framework margin and padding.
वेब डेवलपर किसी html वेबपेज वेबसाइट एलिमेंट के इनसाइड और आउटसाइड ऑब्जेक्ट एलिमेंट स्पेस को कंट्रोल और मैनेज करने के लिए मार्जिन और पैडिंग क्लास को ऐड कर डिस्प्ले सकते हैं। यह क्लास हमें एक क्लियर और प्रॉपर ऑर्गनाइज़्ड वेबपेज लेआउट या वेल स्ट्रक्चर डिज़ाइन क्रिएट करने में हेल्प करता है।
Example of margin and padding group in W3.CSS framework.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let Explore W3.CSS framework group Margin and Padding class attributes </title>
</head>
<body>
<!– it display Element with Margin and Padding effect –>
<div class=”w3-margin w3-padding”>
<p>This html text object element with group margin and padding effect.</p>
</div>
<!– it display Element with Top Margin and Small Padding attributes–>
<div class=”w3-margin-top w3-padding-small”>
<p>This html text object element with top margin and small padding effect.</p>
</div>
<!– it display Element with Bottom Margin and Large Padding attributes–>
<div class=”w3-margin-bottom w3-padding-large”>
<p>This html text object element with bottom margin and large padding effect.</p>
</div>
</body>
</html>
Here’s an example of a margin and padding group in W3.CSS.
- यहाँ इस एक्साम्प्ल में फर्स्ट div ब्लॉक में. w3-margin और .w3-padding क्लासेज का यूज़ कर आल साइड मार्जिन और पैडिंग दोनों इफ़ेक्ट को अप्लाई किया गया है।
- इसी प्रकार सेकंड div ब्लॉक में टॉप मार्जिन (w3-margin-top) और स्माल पैडिंग (w3-padding-small) क्लास इफ़ेक्ट ऐट्रिब्यूट्स को अप्लाई किया गया है।
- इसी सीक्वेंस में थर्ड div ब्लॉक में बॉटम मार्जिन (w3-margin-bottom) और लार्ज पैडिंग (w3-padding-large) क्लास को ऐड किया गया है।
