هوامش W3.CSS
تضيف فئة w3-margin هامشًا بمقدار 16 بكسل لجميع جوانب العنصر.
فئات الهامش W3.CSS
يوفر W3.CSS فئات الهامش التالية:
| فصل | يعرّف |
|---|---|
| w3- الهامش | يضيف هامشًا يبلغ 16 بكسل لكل جوانب العنصر |
| w3-الهامش الأعلى | يضيف هامشًا علويًا يبلغ 16 بكسل إلى عنصر |
| w3- الهامش الأيمن | يضيف هامشًا أيمنًا يبلغ 16 بكسل إلى عنصر |
| w3- الهامش- القاع | يضيف هامشًا سفليًا يبلغ 16 بكسل إلى عنصر |
| w3- الهامش الأيسر | يضيف هامشًا يسارًا يبلغ 16 بكسل إلى عنصر |
| w3 القسم | يضيف هامشًا علويًا وسفليًا يبلغ 16 بكسل إلى عنصر |
هامش
تضيف فئة w3-margin هامشًا بمقدار 16 بكسل لجميع جوانب العنصر:
تضيف فئة w3-margin هامشًا بمقدار 16 بكسل لجميع جوانب العنصر.
مثال
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
أعلى الهامش
تضيف فئة w3-margin-top هامشًا علويًا بمقدار 16 بكسل إلى عنصر:
تضيف فئة w3-margin-top هامشًا علويًا بمقدار 16 بكسل إلى عنصر.
مثال
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
الهامش السفلي
تضيف فئة w3-margin-bottom هامشًا سفليًا بمقدار 16 بكسل إلى عنصر:
تضيف فئة w3-margin-bottom هامشًا سفليًا بمقدار 16 بكسل إلى عنصر ما.
مثال
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
الهامش الأيسر
تضيف فئة w3-margin-left هامشًا أيسر بمقدار 16 بكسل إلى عنصر:
تضيف فئة w3-margin-left هامشًا أيسر بمقدار 16 بكسل إلى عنصر.
مثال
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
الهامش الأيمن
تضيف فئة w3-margin-right هامشًا أيمنًا يبلغ 16 بكسل إلى عنصر:
تضيف فئة w3-margin-right هامشًا أيمنًا يبلغ 16 بكسل إلى عنصر.
مثال
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
الأقسام
لا تحتوي العديد من عناصر HTML على هامش علوي أو سفلي افتراضي. سيتم عرض هذه العناصر بدون هامش بينها:
انا حزين
انا اخضر
يمكن استخدام فئة w3-section لفصل العناصر.
يضيف هامشًا علويًا وسفليًا 16 بكسل لأي عنصر HTML:
انا حزين
انا اخضر
مثال
<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>