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:

CSS Box Model (sumber: www.w3c.org)Terlihat margin berada di lapisan terkahir box model. Jika tanpa margin, setiap element HTML akan saling menempel satu sama lain, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 50px;
     border: 2px solid red;
     background-color: green;
   }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

Tanpa menggunakan margin

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 50px;
     border: 2px solid red;
     background-color: green;
     margin: 20px;
   }
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Dengan property margin

Sekarang setiap tag <div> 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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 50px;
     border: 2px solid red;
     background-color: green;
     margin: 20px 100px;
   }
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Property margin berlainan pada setiap sisi

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 <h1>, <h2>, atau tag <p> 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 <h1> dan <p> tanpa style CSS apapun:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
</head>
<body>
<h1>Belajar CSS Box Model di Duniailkom</h1>
<p>
   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.
</p>
</body>
</html>

Margin bawaan web browser

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   h1, p {
     margin: 0;
   }
</style>
</head>
<body>
<h1>Belajar CSS Box Model di Duniailkom</h1>
<p>
   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.
</p>
</body>
</html>

Menghapus margin bawaan web browser

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.

Tutorial Terkait:

Add Comment