Beranda / CSS / Pemrograman / Web

Mengenal CSS Margins: Cara Ngatur Jarak Elemen Biar Rapi (Tutorial CSS Part 21)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 21 : Logo CSS

Kalau kamu pernah ngerasa elemen-elemen di website kayak terlalu dempet atau malah terlalu jauh, mungkin saatnya kamu kenalan lebih dekat sama CSS Margin. Margins ini adalah salah satu properti penting buat ngatur jarak luar antar elemen, biar tampilan website kamu lebih enak dilihat dan terorganisir.

Yuk kita bahas satu-satu dari dasar sampai properti yang mungkin jarang dipakai, tapi penting buat kamu tahu!

1. CSS Margins: Apa Itu?

Margin di CSS adalah ruang kosong di luar border sebuah elemen. Jadi, kalau kamu punya sebuah kotak (div misalnya), margin ini adalah jarak antara kotak itu dengan elemen lainnya di sekitarnya.

Contoh dasar:

div {
  margin: 20px;
}

Artinya, si <div> bakal punya jarak 20px dari semua sisi luar (atas, kanan, bawah, kiri). Simple, kan?

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: 20px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div>Ini div dengan margin 20px di semua sisi</div>
</body>
</html>

Hasilnya:

Contoh CSS margin
Gambar 21.1 : Contoh CSS margin

2. Margin - Sisi Individu

Kadang kita nggak butuh semua sisi dikasih margin. Bisa aja cuma mau ngasih jarak atas doang, atau cuma kiri-kanan aja. Untungnya CSS punya properti margin untuk tiap sisi: 

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Nah, dengan ini kamu bisa atur masing-masing sisi dengan bebas. Mau atasnya dekat, bawahnya jauh? Bisa banget!

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin-top: 10px;
      margin-right: 15px;
      margin-bottom: 20px;
      margin-left: 25px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div>Margin berbeda di tiap sisi</div>
</body>
</html>

Hasilnya:

Contoh CSS margin tiap sisi
Gambar 21.2 : Contoh CSS margin tiap sisi

3. Margin - Shorthand Property

Kalau kamu males nulis panjang-panjang kayak di atas, CSS kasih solusi lewat shorthand alias penulisan singkat: 

margin: 10px 15px 20px 25px;

Urutannya gimana? Gampang diingat: atas – kanan – bawah – kiri (searah jarum jam).

Ada juga versi singkat lainnya:

  • margin: 10px; → semua sisi 10px
  • margin: 10px 20px; → atas & bawah 10px, kanan & kiri 20px
  • margin: 10px 20px 30px; → atas 10px, kanan & kiri 20px, bawah 30px

Jadi, tinggal sesuaikan sama kebutuhan layout kamu.

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: 10px 15px 20px 25px;
      background-color: peachpuff;
    }
  </style>
</head>
<body>
  <div>Margin shorthand: atas, kanan, bawah, kiri</div>
</body>
</html>

Hasilnya:

Contoh CSS margin shorthand
Gambar 21.3 : Contoh CSS margin shorthand

4. Nilai auto pada Margin

Salah satu trik favorit para web developer adalah pakai nilai auto, terutama buat ngatur elemen agar posisi tengah secara horizontal.

Contoh:

div {
  width: 300px;
  margin: 0 auto;
}

Artinya: atas & bawah 0, kanan & kiri otomatis. Hasilnya, elemen akan centering dengan sendirinya di dalam kontainer. Tapi jangan lupa, ini baru jalan kalau elemen punya width yang jelas.

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 300px;
      margin: 0 auto;
      background-color: lightcoral;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>Div ini ditengah secara horizontal</div>
</body>
</html>

Hasilnya:

Contoh CSS margin auto
Gambar 21.4 : Contoh CSS margin auto

5. Nilai inherit pada Margin

Pernah denger properti inherit? Ini dipakai biar elemen mewarisi nilai margin dari elemen induknya (parent).

Contoh:

div {
  margin: inherit;
}

Ini jarang banget dipakai, tapi bisa berguna kalau kamu ingin mempertahankan konsistensi layout antar elemen yang saling berkaitan.

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      margin: 30px;
      background-color: lavender;
    }

    .child {
      margin: inherit;
      background-color: thistle;
    }
  </style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">Child (ikut margin parent)</div>
  </div>
</body>
</html>

Hasilnya:

Contoh CSS margin inherit
Gambar 21.5 : Contoh CSS margin inherit

6. Semua Properti Margin CSS

Buat kamu yang pengen lihat daftar lengkap properti margin, ini dia:

  • margin (shorthand)
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Semua properti ini bisa kamu kasih nilai:

  • Piksel (px), em, rem, %, dll.
  • auto
  • inherit

Penutup

Nah, sekarang kamu udah paham kan gimana cara kerja margin di CSS? Walau kelihatannya sepele, tapi margin ini punya peran penting banget buat bikin tampilan web yang rapi dan nyaman dilihat. Coba deh eksplorasi lebih lanjut dan eksperimen langsung di project kamu!

Kalau kamu suka artikel kayak gini dan pengen belajar CSS lainnya, kasih tahu aku ya. Bisa kita bahas padding, border, layout, dan teman-temannya!

Posting Komentar untuk "Mengenal CSS Margins: Cara Ngatur Jarak Elemen Biar Rapi (Tutorial CSS Part 21)"