Beranda
CSS

Tutorial Dasar Margin di CSS

kali ini kodeviolet.com akan membahas tentang Margin di CSS, yang merupakan salah satu cara paling sederhana tapi powerful untuk mengatur jarak antar
Kode Violet
Tutorial Dasar Margin di CSS

Halo semuanya! Pernah nggak sih kalian lagi ngatur tampilan website, tapi kok elemen-elemennya dempet banget satu sama lain? Nah, kali ini kodeviolet.com akan membahas tentang Margin di CSS, yang merupakan salah satu cara paling sederhana tapi powerful untuk mengatur jarak antar elemen di halaman web kalian.

Apa Itu Margin di CSS?

Margin adalah ruang kosong di luar batas (border) elemen HTML. Fungsinya untuk memberi jarak antar elemen agar tidak saling berdempetan. Margin bisa diatur untuk setiap sisi elemen: atas (top), kanan (right), bawah (bottom), dan kiri (left).

Properti Margin yang Umum Digunakan

Berikut adalah beberapa properti CSS yang sering digunakan untuk mengatur margin:

Properti Fungsi
margin Mengatur margin ke semua sisi sekaligus
margin-top Mengatur margin bagian atas
margin-right Mengatur margin bagian kanan
margin-bottom Mengatur margin bagian bawah
margin-left Mengatur margin bagian kiri

Cara Menulis Properti Margin

CSS menyediakan beberapa cara menuliskan nilai margin:

  1. Satu nilai: margin: 20px; → semua sisi 20px
  2. Dua nilai: margin: 10px 20px; → atas & bawah 10px, kanan & kiri 20px
  3. Tiga nilai: margin: 10px 15px 5px; → atas 10px, kanan & kiri 15px, bawah 5px
  4. Empat nilai: margin: 5px 10px 15px 20px; → atas, kanan, bawah, kiri

Nilai Khusus pada Margin

CSS juga mengenal nilai khusus seperti:

  • auto: Berguna untuk membuat elemen berada di tengah secara horizontal (biasanya pada elemen blok seperti <div>) 
    div {
  width: 300px;
  margin: 0 auto;
}
  • inherit: Mewarisi nilai margin dari elemen induk
  • initial: Mengatur margin ke nilai default CSS

Contoh Penggunaan Margin

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: coral;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

Hasilnya, kedua kotak akan memiliki jarak 20px dari elemen lain di sekitarnya.

Baca Juga:
Kamus CSS Lengkap, Properti CSS dan Fungsinya

Kesimpulan

Jadi itulah penjelasan tentang margin di CSS, fitur sederhana tapi sangat penting untuk membuat layout website kalian lebih rapi dan nyaman dilihat. Semoga artikel dari kodeviolet.com ini bisa membantu kalian dalam mengatur tampilan web dengan lebih baik ya!

Posting Komentar