Pengertian Margin dan Fungsinya dalam CSS

Halaman website disusun menggunakan elemen-elemen block yang berbentuk persegi panjang.

Secara default, masing-masing elemen block ini saling berhimpit satu sama lain seperti berikut:

Agar elemen block bisa tersusun rapi sesuai dengan desain yang diinginkan, kamu harus memahami karakteristik “box-model” dari sebuah elemen HTML.

Box-model menggambarkan area yang terdapat dalam setiap elemen, yaitu: content area, padding area, border area, dan margin area.

Content area ada pada setiap elemen, sedangkan padding area, border area, dan margin area merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.

Pengertian Margin dan Fungsinya

Margin merupakan area terluar dalam box model elemen yang berupa spasi atau ruang kosong.

Margin berada di luar content area yang membatasi sebuah elemen dengan elemen lain.

Tanpa adanya margin, setiap elemen HTML akan menempel satu sama lain seperti contoh di atas.

Dalam mendesain website, penggunaan margin sangat penting untuk mengatur jarak elemen satu dengan elemen yang lain agar terlihat rapi.

Margin dibuat dengan menggunakan property CSS margin.

header {
    margin: 1em;
}

Sekarang saya akan menggunakan contoh pertama untuk diberi margin pada elemen header dan kontennya.

Perhatikan contoh di atas! elemen header dan elemen konten sudah tidak menempel lagi dengan elemen dibawahnya.

Mengatur Margin pada Sisi Elemen

CSS memiliki property yang bisa digunakan untuk menentukan margin pada setiap sisi elemen:

• margin-top
• margin-right
• margin-bottom
• margin-left

Dan semua property margin tersebut bisa ditentukan dengan nilai berikut:

• auto - browser mengatur margin secara otomatis
• length - menentukan margin dalam satuan ukuran px, pt, cm, em, rem, dll.
• % - menentukan margin dalam % dari lebar elemen.
• inherit - menentukan margin berdasarkan lebar margin elemen induk

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Menggunakan Shorthand Property margin

Seperti pada penjelasan sebelumnya, kamu bisa mengatur setiap sisi elemen dengan nilai margin yang berbeda.

Agar tidak terlalu panjang kode CSS-nya, kamu bisa menggunakan shorthand property margin yang menentukan sisi atas, kanan, bawah, dan kiri.

Pada contoh kode di atas, kamu bisa menyingkatnya menjadi:

p {
    margin: 100px 150px 100px 80px;
}

Jika properti margin memiliki 4 nilai:

• margin: 1rem 0.5rem 2rem 1.5rem;

  • margin atas adalah 1rem

  • margin kanan adalah 0.5rem

  • margin bawah adalah 2rem

  • margin kiri adalah 1.5rem

    Properti margin dengan 4 nilai

Jika properti margin memiliki 3 nilai;

• margin: 1rem 2rem 1.5rem;

  • margin atas adalah 1rem

  • margin kanan adalah 2rem

  • margin bawah adalah 1.5rem

  • margin kiri adalah 2rem

    Properti margin dengan 3 nilai

Jika properti margin memiliki 2 nilai;

• margin: 1rem 2rem;

  • margin atas adalah 1rem

  • margin kanan adalah 2rem

  • margin bawah adalah 1rem

  • margin kiri adalah 2rem

    Properti margin dengan 2 nilai

Jika properti margin memiliki 1 nilai;

• margin: 1rem;

  • margin atas adalah 1rem

  • margin kanan adalah 1rem

  • margin bawah adalah 1rem

  • margin kiri adalah 1rem

    Properti margin dengan 1 nilai

Menggunakan Nilai Otomatis pada Margin

Kamu bisa menggunakan properti margin dengan nilai auto untuk memposisikan elemen dari container.

Contoh:

<div class="box__container">
    <div class="box"></div>
</div>

.box__container {
    width: 100%;
}

.box {
    width: 25%;
    height: 100px;
    background: lightblue;
    margin-left: auto;
    margin-right: auto;
}

Pada contoh di atas, elemen “box biru” memiliki lebar 25% dari lebar elemen “box container”.

Elemen “box” diatur menggunakan margin-left dan margin-right dengan nilai auto.

Sehingga ruang kosong dari elemen “box container” akan dibagi rata kanan dan kiri sebagai nilai margin dari elemen “box”.