CSS Margin

Sekarang kita lanjut ke salah satu konsep paling mendasar tapi sangat penting dalam tata letak web yaitu CSS Margin.

Dengan margin, kamu bisa mengatur jarak antar elemen, menjaga agar konten tidak saling bertumpuk, dan membuat layout jadi lebih rapi dan enak dilihat.

Apa Itu Margin?

Margin adalah ruang kosong di luar batas elemen (border) yang digunakan untuk menciptakan jarak antar elemen HTML.

Bayangkan margin seperti ruang antara kotak A dan kotak B.

—

Fungsi Margin

Memberi ruang antar elemen
Menjaga elemen agar tidak terlalu rapat
Membantu menyusun layout yang bersih dan konsisten

Cara Mengatur Margin di CSS

Ada beberapa cara yang umum digunakan dalam menentukan margin di sebuah elemen html.

1. Properti Umum:

margin: 20px;

Keterangan:

Artinya, semua sisi (atas, kanan, bawah, kiri) diberi jarak 20px.

2. Margin Spesifik Sisi:

Pemberian margin untuk sisi yang lebih spesifik atas, kanan, bawah, kiri. Lebih lengkapnya dapat lihat pada tabel berikut ini:

Properti	Fungsi
`margin-top`	Jarak dari atas
`margin-right`	Jarak dari kanan
`margin-bottom`	Jarak dari bawah
`margin-left`	Jarak dari kiri

Contoh:

div {
  margin-top: 10px;
  margin-bottom: 20px;
}

3. Shorthand 4 Nilai (Top, Right, Bottom, Left)

Contoh:

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

Artinya:

Top: 10px
Right: 20px
Bottom: 30px
Left: 40px

4. Shorthand 2 atau 3 Nilai:

Contoh:

margin: 10px 20px;
/* Top & Bottom: 10px, Left & Right: 20px */

margin: 10px 20px 30px;
/* Top: 10px, Left & Right: 20px, Bottom: 30px */

Contoh Kode Lengkap Penggunaan Margin

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: #4caf50;
      color: white;
      padding: 20px;
      margin: 30px;
      font-size: 20px;
    }

    .small-margin {
      margin: 10px;
    }
  </style>
</head>
<body>

  <div class="box">Kotak dengan margin 30px</div>
  <div class="box small-margin">Kotak dengan margin 10px</div>

</body>
</html>

Hasilnya:

css-margin-example

Tips Menggunakan Margin

Gunakan margin untuk memberi jarak antar elemen luar
Jangan bingung dengan padding (padding = ruang di dalam elemen)
Gunakan satuan yang konsisten (px, em, %, rem)
Hati-hati dengan margin collapse (khususnya antar elemen vertikal seperti <div> di atas & bawah)

Kesimpulan

Dengan CSS Margin, kamu bisa:

Menyusun layout yang terstruktur
Membuat jarak antar elemen lebih lega
Meningkatkan keterbacaan dan estetika desain web