CSS Margin
margin digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Margin memiliki 4 macam penjabaran yang dapat digunakan secara terpisah sendiri-sendiri, yaitu: margin-top, margin-right, margin-bottom dan margin-left. Jadi, margin adalah shorthand (kependekan) untuk mendeklarasikan keempat penjabaran tersebut secara serentak (sekaligus) dalam satu baris.
Dengan margin, kita bisa mengatur posisi elemen agar memiliki ruang lebih luas atau lebih sempit dari elemen sebelum, bersebelahan atau sesudahnya, sesuai dengan keinginan.
Syntax
Penggunaan Sintaksis CSS Margin
margin: length | percentage | auto | initial | inherit;
Value
Nilai CSS margin
CSS margin memiliki values (nilai/isian) satu, dua, tiga dan empat deret nilai menggunakan unit sebagai berikut:
Menentukan batas tepi (margin) dalam satuan: px, mm, cm, in, pt, pc (Absolute length units); em, ex, ch, rem (Relative length units). Contoh: margin: 1rem;
Menentukan batas tepi (margin) dengan hitungan persentase berdasarkan lebar containing block element (blok element di dalamnya). Contoh: margin: 30%;
Diperhitungkan secara otomatis oleh browser. Contoh: margin: 0 auto;
mengikuti element sebelumnya (parent). Contoh: margin: inherit;
Negative value (nilai negatif) juga diperbolehkan. Contoh: margin: -20px;
Example
Contoh CSS margin
p {
margin: 20px;
}
Semua p (paragraf) memiliki margin (Jarak bagian luar dari tepi garis) yaitu: 20px baik tepi atas, kanan, bawah dan kiri.
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo CSS Margin - apacara.com</title>
<style>
body {margin: 0}
div {
width: 50px;
height: 50px;
background: tomato;
}
/* style untuk demo */
.box1 {
}
.box2{
margin-left: 20px;
}
/* ini digunakan agar posisi element block berada di tengah-tengah */
.box3 {
margin: 0 auto;
}
</style>
</head>
<body>
<h5>Tanpa Margin</h5>
<div class="box1">
box 1
</div>
<hr />
<h5><code>margin-left: 20px;</code></h5>
<div class="box2">
box 2
</div>
<hr />
<h5><code>margin: 0 auto;</code></h5>
<div class="box3">
box 3
</div>
</body>
</html>
Contoh 2:
Dengan 2 deret nilai (value)
margin: vertical horizontal = margin: atas&bawah kiri&kanan p {
margin: 5px 20px;
}
Apabila diterjemahkan kode diatas memiliki arti sebagai berikut:
Semua p (paragraf) memiliki margin (Jarak bagian luar dari tepi garis) dimulai dari kiri yaitu: 5px untuk jarak tepi atas dan tepi bawah (digabung jadi satu), 20px untuk jarak tepi kiri dan tepi kanan (digabung jadi satu).
Jadi, jika ditulis 2 nilai, maka urutan polanya: atas dan bawah 5px ? kiri dan kanan 20px
Contoh 3:
Dengan 3 deret nilai (value)
margin: top horizontal bottom = margin: atas kiri&kanan bawah p {
margin: 5px 15px 20px;
}
Apabila diterjemahkan kode diatas memiliki arti sebagai berikut:
Semua p (paragraf) memiliki margin (Jarak bagian luar dari tepi garis) dimulai dari kiri yaitu: 5px untuk jarak tepi atas, 15px untuk jarak tepi kiri dan tepi kanan (digabung jadi satu), 20px untuk jarak tepi bawah.
Jadi, jika ditulis 3 nilai, maka urutan polanya: atas 5px ? kiri dan kanan 15px ? bawah 20px
Contoh 4:
Dengan 4 deret nilai (value)
margin: top right bottom left = margin: atas kanan bawah kiri p {
margin: 5px 10px 15px 20px;
}
Apabila diterjemahkan kode diatas memiliki arti sebagai berikut:
Semua p (paragraf) memiliki margin (Jarak bagian luar dari tepi garis) dimulai dari kiri yaitu: 5px untuk jarak tepi atas, 10px untuk jarak tepi kanan, 15px untuk jarak tepi bawah, 20px untuk jarak tepi kiri.
Jadi, jika ditulis 4 nilai, maka urutan polanya: atas 5px ? kanan 10px ? bawah 15px ? kiri 20px
Collapsing margins
Margin yang melipat/menyatu
Apabila ada dua element yang bersentuhan secara vertical (atas dan bawah) tanpa konten, padding, border atau elemen lain yang memisahkan dan keduanya memiliki nilai margin yang saling beradu, maka akan collapse (Melipat/menyatu). Kedua nilai margin masing-masing element tersebut hanya akan diambil salah satu yang paling besar dan tidak saling bertambah. Hal ini, hanya terjadi pada vertical margin (Atas dan Bawah) dan tidak berlaku untuk horizontal margin (kiri dan kanan). Untuk memahami hal ini, perhatikan contoh berikut:
Contoh: Collapsing margins
<!DOCTYPE html>
<html>
<head>
<title>Demo by:dul</title>
</head>
<body>
<h3>Collapsing Margins</h3>
<p>Contoh Text Paragraf</p>
</body>
</html>
h3 {margin-bottom: 20px}
p {margin-top: 30px}
Apabila diterjemahkan, kode diatas memiliki arti sebagai berikut:
h3 memiliki tepi bawah (margin-bottom) 20px, Sedangkan p memiliki tepi atas (margin-top) 30px. Kedua element tersebut saling beradu margin dan seharusnya, diantara kedua element tersebut memiliki margin sebesar 50px, karena penambahan 20px dengan 30px dari kedua element tersebut. Tapi, kenyataannya adalah collapse (melipat/merapat) dan hanya memiliki margin 30px saja yang diambil dari element yang memiliki nilai terbesar. Disinilah, letak dan pengertian dari collapsing margin tersebut.
SHARE