Margin W3.CSS
Kelas w3-margin menambahkan margin 16px ke semua sisi elemen.
Kelas Margin W3.CSS
W3.CSS menyediakan kelas margin berikut:
| Kelas | Mendefinisikan |
|---|---|
| w3-margin | Menambahkan margin 16px ke semua sisi elemen |
| w3-margin-atas | Menambahkan margin atas 16px ke elemen |
| w3-margin-kanan | Menambahkan margin kanan 16px ke elemen |
| w3-margin-bawah | Menambahkan margin bawah 16px ke elemen |
| w3-margin-kiri | Menambahkan margin kiri 16px ke elemen |
| w3-bagian | Menambahkan margin atas dan bawah 16px ke elemen |
Batas
Kelas w3-margin menambahkan margin 16px ke semua sisi elemen:
Kelas w3-margin menambahkan margin 16px ke semua sisi elemen.
Contoh
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Margin Atas
Kelas w3-margin-top menambahkan margin atas 16px ke elemen:
Kelas w3-margin-top menambahkan margin atas 16px ke sebuah elemen.
Contoh
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Margin Bawah
Kelas w3-margin-bottom menambahkan margin bawah 16px ke elemen:
Kelas w3-margin-bottom menambahkan margin bawah 16px ke sebuah elemen.
Contoh
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Margin Kiri
Kelas w3-margin-left menambahkan margin kiri 16px ke elemen:
Kelas w3-margin-left menambahkan margin kiri 16px ke sebuah elemen.
Contoh
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Margin Kanan
Kelas w3-margin-right menambahkan margin kanan 16px ke elemen:
Kelas w3-margin-right menambahkan margin kanan 16px ke sebuah elemen.
Contoh
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Bagian
Banyak elemen HTML tidak memiliki margin atas atau bawah default. Elemen-elemen tersebut akan ditampilkan tanpa margin di antara mereka:
saya biru
saya hijau
Kelas bagian w3 dapat digunakan untuk memisahkan elemen.
Ini menambahkan margin atas dan bawah 16px ke elemen HTML apa pun:
saya biru
saya hijau
Contoh
<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>