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.
- 1Pengertian CSS (Cascading Style Sheets)
- 2Cara Memasukan Kode CSS Ke HTML
- 3Pengertian Selector Css
- 4Cara Penulisan Kode CSS
- 5Cara Penulisan Komentar Pada CSS
- 6Jenis-jenis Satuan Ukuran Pada CSS
- 7Jenis-jenis Pewarnaan Pada CSS
- 8Penerapan Properti Background Pada CSS
- 9Mengatur Font Pada CSS
- 10Mengatur Teks Pada CSS
- 11Mengatur Gambar Pada CSS
- 12Mengatur Link Dengan CSS
- 13Mengatur Tabel Dengan CSS
- 14Cara Mengatur Garis Dengan CSS
- 15Cara Mengatur Margin Dengan Css
- 16Cara Mengatur Padding Di CSS
- 17Mengatur List Dengan CSS
- 18Cara Mengganti Bentuk Kursor Mouse Di CSS
- 19Mengatur Outline Dengan CSS
- 20Mengatur Lebar Elemen Dengan CSS
- 21Mengatur Tinggi Elemen Dengan CSS
- 22Mengatur Visibility Di CSS
- 23Mengatur Position Di CSS
- 24Layer Pada Html Dengan CSS
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.
