CSS Margins

Margin adalah ruang di luar batas elemen yang digunakan untuk memberikan jarak antar elemen. CSS menyediakan properti margin untuk mengatur ruang tersebut di sekitar elemen.

1. Menambahkan Margin Sederhana (margin)

Dengan properti margin, Anda dapat menambahkan margin pada semua sisi elemen sekaligus.

div {
  margin: 20px;
}

2. Menggunakan Margin untuk Setiap Sisi

Anda bisa mengatur margin secara individual untuk setiap sisi elemen: atas (top), kanan (right), bawah (bottom), dan kiri (left).

div {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 50px;
}

3. Menggunakan Margin Shorthand

Untuk menyingkat penulisan margin di CSS, Anda bisa menggunakan shorthand, yaitu memberikan nilai margin dalam urutan top right bottom left.

div {
  margin: 10px 20px 30px 40px;
}

4. Menggunakan Margin Auto

Jika Anda ingin elemen ditempatkan secara horizontal di tengah halaman, Anda bisa menggunakan margin: auto pada elemen dengan lebar tetap.

div {
  width: 50%;
  margin: auto;
}

5. Menggunakan Margin Negatif

Margin juga bisa bernilai negatif untuk menarik elemen lebih dekat atau keluar dari batasnya.

div {
  margin-top: -20px;
}

Ringkasan Properti CSS Margin