W3.CSS แพ็ดดิ้ง
w3-padding-ขนาดใหญ่
ฉันมีช่องว่างภายในด้านบนและด้านล่าง 12px และช่องว่างภายในด้านซ้ายและขวา 24px
W3.CSS Padding Number Classes
คลาสตัวเลข w3-padding-เพิ่มการเติมด้านบนและด้านล่างให้กับองค์ประกอบ HTML ใดๆ:
| ระดับ | กำหนด |
|---|---|
| w3-padding-16 | เพิ่มช่องว่างด้านบนและด้านล่าง 16px ให้กับองค์ประกอบ |
| w3-padding-24 | เพิ่มช่องว่างด้านบนและด้านล่าง 24px ให้กับองค์ประกอบ |
| w3-padding-32 | เพิ่มช่องว่างด้านบนและด้านล่าง 32px ให้กับองค์ประกอบ |
| w3-padding-48 | เพิ่มช่องว่างด้านบนและด้านล่าง 48px ให้กับองค์ประกอบ |
| w3-padding-64 | เพิ่มช่องว่างด้านบนและด้านล่าง 64px ให้กับองค์ประกอบ |
ตัวอย่าง:
w3-padding-16
ฉันมีช่องว่างภายใน 16px บนและล่าง
w3-padding-24
ฉันมีช่องว่างภายใน 24px บนและล่าง
w3-padding-32
ฉันมีช่องว่างภายใน 32px ด้านบนและด้านล่าง
w3-padding-48
ฉันมีช่องว่างภายในด้านบนและด้านล่าง 48px
w3-padding-64
ฉันมีช่องว่างภายใน 64px ด้านบนและด้านล่าง
ตัวอย่าง
<div class="w3-panel w3-padding-16">
<p>I have 16px top and bottom padding.</p>
</div>
W3.CSS คลาสขนาดการเติม
คลาส ขนาดw3-padding- เพิ่มการเติมด้านบน ด้านล่าง ด้านขวา และด้านซ้ายให้กับองค์ประกอบ HTML ใดๆ:
| ระดับ | กำหนด |
|---|---|
| w3-padding | เพิ่มด้านบนและด้านล่าง 8px และช่องว่างภายในด้านซ้ายและขวา 16px |
| w3-padding-เล็ก | เพิ่มด้านบนและด้านล่าง 4px และช่องว่างภายในด้านซ้ายและขวา 8px |
| w3-padding-ขนาดใหญ่ | เพิ่มด้านบนและด้านล่าง 12px และช่องว่างภายในด้านซ้ายและขวา 24px |
ตัวอย่าง:
w3-padding-เล็ก
ฉันมีช่องว่างภายในด้านบนและด้านล่าง 4px และช่องว่างภายในด้านซ้ายและขวา 8px
w3-padding
ฉันมีช่องว่างภายในด้านบนและด้านล่าง 8px และช่องว่างภายในด้านซ้ายและขวา 16px
w3-padding-ขนาดใหญ่
ฉันมีช่องว่างภายในด้านบนและด้านล่าง 12px และช่องว่างภายในด้านซ้ายและขวา 24px
ตัวอย่าง
<div class="w3-panel w3-padding-large">
<p>I have 12px top and bottom padding and 24px left and right padding.</p>
</div>