Tutorial Belajar CSS: Pengertian Margin dan Fungsi Margin dalam CSS

Lapisan terakhir dari konsep CSS Box Model adalah margin. Dalam tutorial belajar CSS kali ini akan dibahas tentang pengertian margin dan fungsi margin dalam CSS.

---

Pengertian Margin dalam CSS

Mirip seperti padding, margin juga merupakan spasi atau ruang kosong di dalam Box Model. Bedanya, margin berada di luar konten, yakni yang membatasi sebuah element dengan element lain. Hal ini bisa dilihat kembali dari gambar CSS box model berikut:

Terlihat margin berada di lapisan terkahir box model. Jika tanpa margin, setiap element HTML akan saling menempel satu sama lain, seperti contoh berikut:

Dengan menambahkan property margin: 20px, hasilnya menjadi sebagai berikut:

Sekarang setiap tag

akan berjarak 20 pixel satu sama lain.

---

Cara Penulisan Property Margin (Shorthand Notation)

Juga hampir sama dengan padding, kita juga bisa menulis property margin dengan penulisan shorthand notation. Aturan TRouBLe juga berlaku disini.

Sebagai contoh, property margin: 10px 15px 5px 20px sama artinya dengan:

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

Berikut contoh penggunaannya:

Property margin: 20px 100px berarti saya men-set margin atas dan bawah setinggi 20 pixel, serta margin kiri dan kanan sebesar 100 pixel.

---

Mengenal Margin Bawaan Web Browser

Seperti yang saya singgung, setiap element HTML harus memiliki margin agar tidak saling ‘bersenggolan’. Tapi bagaimana dengan tag

,

, atau tag

yang jika ditulis tanpa margin pun tetap berjarak satu sama lainnya?

Ini karena web browser memiliki margin bawaan atau default margin yang selalu aktif sampai seseorang (web designer) menimpanya dengan nilai lain.

Berikut contoh tampilan tag

dan

tanpa style CSS apapun:

Belajar CSS Box Model di Duniailkom

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.

Terlihat bahwa diantara kedua tag ini terdapat spasi atau ruang kosong yang sebenarnya adalah margin bawaan web browser.

Bagaimana kita yakin ini adalah margin? Mari kita tambahkan property margin: 0, dan berikut hasilnya:

Belajar CSS Box Model di Duniailkom

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.

Seperti yang terlihat, kali ini diantara kedua tag ini tidak ada lagi spasi dan tampak saling menempel. Ini karena property margin: 0 akan menimpa dan menghapus margin bawaan web browser.

Property margin yang kita bahas disini menutup 5 property penyusun CSS Box Model, yakni: width, height, padding, border, dan margin. Dalam tutorial berikutnya kita akan membahas hitung-hitungan CSS Box Model dalam Cara Menghitung Lebar dan Tinggi CSS Box Model.

---

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Sumber wk.com