Tutorial Belajar CSS: Pengertian Margin dan Fungsi Margin dalam CSS

Posted on

Lapisan terakhir dari konsep CSS Box Model yakni margin. Di panduan belajar CSS kali ini akan dibahas mengenai pengertian margin dan fungsi margin dalam CSS.


Pengertian Margin di CSS

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

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

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

Kini ini setiap tag <div> akan berjarak 20 pixel satu sama lain.


Cara Penulisan Property Margin (Shorthand Notation)

Pun hampir sama dengan padding, kita pun dapat menulis property margin dengan penulisan shorthand notation. Aturan TRouBLe pun berlaku disini.

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

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 mesti mempunyai margin agar tak saling ‘bersenggolan’. Namun bagaimana dengan tag <h1>, <h2>, atau tag <p> yang jikalau ditulis tanpa margin pun tetap berjarak satu sama lainnya?

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

Berikut contoh tampilan tag <h1> dan <p> tanpa style CSS apapun:

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

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

Seperti yang terlihat, kali ini diantara kedua tag ini tak 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. Di panduan berikutnya kita akan membahas hitung-hitungan CSS Box Model di Cara Menghitung Lebar dan Tinggi CSS Box Model.


eBook CSS Uncover Duniailkom

Apabila kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/