W3.CSS मार्जिन
W3-मार्जिन वर्ग एक तत्व के सभी पक्षों में 16px मार्जिन जोड़ता है।
W3.CSS मार्जिन क्लासेस
W3.CSS निम्नलिखित मार्जिन वर्ग प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-मार्जिन | एक तत्व के सभी पक्षों के लिए एक 16px मार्जिन जोड़ता है |
| w3-मार्जिन-टॉप | एक तत्व के लिए एक 16px शीर्ष मार्जिन जोड़ता है |
| w3-मार्जिन-दाएं | तत्व में 16px दायां हाशिया जोड़ता है |
| w3-मार्जिन-नीचे | एक तत्व में 16px निचला मार्जिन जोड़ता है |
| w3-मार्जिन-बाएं | तत्व में 16px बायां हाशिया जोड़ता है |
| w3-सेक्शन | किसी तत्व में 16px का ऊपरी और निचला मार्जिन जोड़ता है |
हाशिया
W3- मार्जिन वर्ग एक तत्व के सभी पक्षों में 16px मार्जिन जोड़ता है:
W3- मार्जिन वर्ग एक तत्व के सभी पक्षों में 16px मार्जिन जोड़ता है।
उदाहरण
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
मार्जिन टॉप
w3-margin-top वर्ग एक तत्व में 16px शीर्ष मार्जिन जोड़ता है:
w3-margin-top वर्ग एक तत्व में 16px शीर्ष मार्जिन जोड़ता है ।
उदाहरण
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
मार्जिन नीचे
W3- मार्जिन-निचला वर्ग एक तत्व में 16px निचला मार्जिन जोड़ता है:
W3- मार्जिन-निचला वर्ग एक तत्व में 16px निचला मार्जिन जोड़ता है।
उदाहरण
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
मार्जिन वाम
W3- मार्जिन-बाएं वर्ग एक तत्व में 16px बायां हाशिया जोड़ता है:
W3- मार्जिन-बाएं वर्ग एक तत्व में 16px बायां हाशिया जोड़ता है।
उदाहरण
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
मार्जिन राइट
w3-margin-right वर्ग एक तत्व में 16px दायां हाशिया जोड़ता है:
w3-margin-right वर्ग एक तत्व में 16px दायां हाशिया जोड़ता है ।
उदाहरण
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
धारा
कई HTML तत्वों में डिफ़ॉल्ट शीर्ष या निचला मार्जिन नहीं होता है। ऐसे तत्व उनके बीच बिना किसी मार्जिन के प्रदर्शित होंगे:
मैं नीला हूँ
मैं हरा हूँ
तत्वों को अलग करने के लिए w3-अनुभाग वर्ग का उपयोग किया जा सकता है ।
यह किसी भी HTML तत्व में 16px ऊपर और नीचे मार्जिन जोड़ता है:
मैं नीला हूँ
मैं हरा हूँ
उदाहरण
<div class="w3-container w3-section w3-blue">
<h1>I am
Blue</h1>
</div>
<div class="w3-container
w3-section
w3-green">
<h1>I am Green</h1>
</div>