W3.CSS Margins
คลาส w3-margin เพิ่มระยะขอบ 16px ให้กับทุกด้านขององค์ประกอบ
คลาสมาร์จิ้น W3.CSS
W3.CSS มีคลาสมาร์จิ้นดังต่อไปนี้:
| ระดับ | กำหนด |
|---|---|
| w3-margin | เพิ่มระยะขอบ 16px ให้กับทุกด้านขององค์ประกอบ |
| w3-margin-top | เพิ่มระยะขอบบนสุด 16px ให้กับองค์ประกอบ |
| w3-ขอบขวา | เพิ่มระยะขอบขวา 16px ให้กับองค์ประกอบ |
| w3-margin-bottom | เพิ่มระยะขอบล่าง 16px ให้กับองค์ประกอบ |
| w3-margin-left | เพิ่มระยะขอบซ้าย 16px ให้กับองค์ประกอบ |
| w3-section | เพิ่มระยะขอบบนและล่าง 16px ให้กับองค์ประกอบ |
มาร์จิ้น
คลาสw3-marginเพิ่มระยะขอบ 16px ให้กับทุกด้านขององค์ประกอบ:
คลาสw3-marginเพิ่มระยะขอบ 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-margin-bottomเพิ่มขอบล่าง 16px ให้กับองค์ประกอบ:
คลาสw3-margin-bottom เพิ่มระยะขอบ ล่าง 16px ให้กับองค์ประกอบ
ตัวอย่าง
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
ขอบซ้าย
คลาสw3-margin-leftเพิ่มระยะขอบซ้าย 16px ให้กับองค์ประกอบ:
คลาสw3-margin-left เพิ่มระยะขอบ ซ้าย 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-sectionสามารถใช้เพื่อแยกองค์ประกอบ
เพิ่ม ระยะขอบบนและล่าง 16pxให้กับองค์ประกอบ 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>