Jika mendengar kata margin tentunya tidak asing lagi jika bisa mengoperasikan perangkat lunak office, dimana margin digunakan untuk mengatur jarak tepi antar elemen atau halaman atau juga teks. Nah dalam tutorial ini kita akan membahas cara mengatur margin dengan css, pada tutorial ini kita akan membahas lengkap cara menggunakan properti margin beserta turunan margin lainnya.
Berikut ini propert-properti margin yang akan dibahas dalam tutorial ini:
- margin properti singkat untuk mengatur seluruh sudut elemen dalam satu deklarasi
- margin-top untuk mengatur margin bagian atas
- margin-bottom untuk mengatur margin bagian bawah
- margin-left untuk mengatur margin bagian kiri
- margin-right untuk mengatur margin bagian kanan
Pada properti-properti diatas akan dibahas beserta penggunaan source code lengkap agar lebih mudah dipahami.
Cara Mengatur Margin Dengan CSS
Seperti pembahasan diatas bahwa ada beberapa properti yang bisa digunakan untuk mengatur margin dengan css salah satunya yang akan kita bahas pertama kali adalah penggunaan properti singkat yang dapat mengatur seluruh sudut elemen dalam satu deklarasi.
margin: 10px 10px 10px 10px;
Sintaks margin diatas digunakan untuk mengatur seluruh jarak tepi elemen, berikut ini gambar penjelasan masing-masing nilai pada properti diatas.
Terlihat bahwa dari masing-masing jarak tepi elemen memiliki jarak 10 pixel, berikut ini contoh source code lengkap mengatur margin dengan css.
<!DOCTYPE html>
<html>
<head>
<title>Margin</title>
<style type="text/css">
.container {
border: 1px solid #000;
width: 50%;
}
.margin {
margin: 10px 10px 10px 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="margin">Elemen margin</div>
</div>
</body>
</html>
Hasil output di browser…
Namun dari cara diatas bisa di persingkat lagi untuk mengatur seluruh elemen dengan nilai yang sama hanya perlu mendeklarasikan dengan satu perintah saja.
margin: 10px;
Dengan sintaks diatas seluruh bagian elemen memiliki jarak tepi 10 pixel, sama seperti kode diatas tetapi dengan syarat seluruh jarak memiliki nilai yang sama.
Bagaimana mengatur margin hanya pada bagian tertentu saja?
Untuk mengatur margin dengan css yang hanya pada bagian tertentu saja bisa dengan menggunakan properti margin-[posisi], meskipun dengan margin diatas memungkinkan untuk dapat dilakukan. Berikut ini kodenya.
margin-top: 10px; /* mengatur jarak atas 10pixel */
Untuk penggunaan properti yang lain tidak berbeda, kita dapat menentukan masing-masing properti dengan nilai-nilai yang kita inginkan. Misalnya:
margin-top: 10px; margin-bottom: 20px; margin-left: 15px; margin-right: 25px;
Properti-properti diatas dapat digunakan untuk menentukan jarak salah satu bagian elemen html, untuk satuan unit jarak dapat menggunakan satuan ukuran selain pixel, misalnya seperti persen, dan lain sebagainya.