Apa itu Margin ?
Pengertian margin
Margin merupakan ruang terluar setelah border yang menjadi jarak antar element html.
Tidak seperti border, margin secara spesifik tidak memiliki visual saat tampil di webrowser. namun, margin adalah salah satu komponen penting dalam element html.
Dalam pembuatan layout dokument html atau web, peran margin selalu di butuhkan untuk mendapatkan style yang baik saat dokument atau web di tampilkan.
Margin dalam CSS memiliki beberapa property antara lain sebagai berikut:
Value margin dapat di definisikan dengan px, em, pt, cm dan lain-lain.
Dengan CSS, kita dapat menyesuaikan jarak antar element dengan mengatur value margin secara global atau individual.
Properti margin Global
Konsep mengatur jarak margin ini memberi nilai (value)
secara merata pada tiap sisi.
Contoh:
Contoh Global margin di CSS
<html>
<head>
<title></title>
<style type="text/css">
#e1{
margin:0px;
background-color:green;
}
#e2{
margin:0px;
background-color:cyan;
}
</style>
</head>
<body>
<p id="e1" >element 1</p>
<p id="e2" >element 2</p>
</body>
</html>
Preview
Contoh di atas kita beri nilai 0px margin kepad du element p html. maka hasilnya akan sama seperti element default. kemudian perhatikan contoh di bawah ini.
Contoh Global margin CSS
<html>
<head>
<title></title>
<style type="text/css">
#e1{
margin:10px;
background-color:green;
}
#e2{
margin:0px;
background-color:cyan;
}
</style>
</head>
<body>
<p id="e1" >element 1</p>
<p id="e2" >element 2</p>
</body>
</html>
Preview
contoh di atas, margin element dengan id e1 kita set 10px maka element p dengan id e1 akan menjauh dari element manapun baik dari kiri, kanan, atas dan bawah sejauh 10px.
Property Margins individual CSS
konsep penataan margin secara individu memudahkan kita mengatur jarak antar element lebih mudah. contoh penggunaan property margin individual sebagai berikut:
Contoh property margin individual CSS
<html>
<head>
<title></title>
<style type="text/css">
#e1{
margin-left:20px;
margin-right:0px;
margin-bottom:0px;
background-color:green;
}
#e2{
margin:0px;
background-color:cyan;
}
</style>
</head>
<body>
<p id="e1" >element 1</p>
<p id="e2" >element 2</p>
</body>
</html>
Preview
Contoh di atas kita memberi element dengan id e1 memiliki property margin margin-left:20px;
margin-right:0px;
margin-bottom:0px;. dengan individual property margin, kita dapat menyesuaikan posisi element dengan lebih leluasa.
Shorthand property margin CSS
konsep ini adalah cara penulisan perintah CSS margin paling efektif. kita cukup menulis satu property dan memberikan nilai berbeda pada tiap sisi margin elemnt.
contoh:
Contoh property shorthend margins CSS
<html>
<head>
<title></title>
<style type="text/css">
#e1{
margin:10px 0px 10px 0px;
background-color:green;
}
#e2{
margin:0px;
background-color:cyan;
}
</style>
</head>
<body>
<p id="e1" >element 1</p>
<p id="e2" >element 2</p>
</body>
</html>
Preview
Contoh di atas definisinya sebagai berikut: