Untuk membuat sebuah website, jarak antar element html sangat penting untuk diperhatikan.
Contoh sederhana, jarak antar paragraf di artikel ini aja diatur. Bayangkan kalau tidak ada jaraknya. Tentu akan berantakan bukan?
Untuk mengatur layout inilah diperlukan margin dan padding.
Margin adalah jarak luar antar elemen. Sedangkan padding adalah jarak sisi dalam elemen dengan elemen yang ada di dalamnya.
Kalau masih kurang paham, lihat illustrasi diatas ya. Disitu ada 3 buah kotak. Kotak pertama paling luar adalah kotak warna hitam, di dalamnya ada kotak warna abu-abu, di dalamnya lagi ada kotak warna putih.
Yang jadi tengah-tengah adalah kotak warna abu-abu. Jarak luar antara kotak abu-abu dengan kotak hitam adalah margin, sedangkan jarak dalam kotak abu-abu dengan kotak putih dinamakan padding.
Ini soal perspektif saja, kalau kamu mengatur nilainya dari kotak putih maka disebut dengan margin.
Mengatur Margin dengan CSS
Saya ulangi ya, definisi margin adalah jarak luar dari satu elemen terhadap elemen lain.
Ada 4 nilai dari margin, yaitu:
margin-top(jarak atas)margin-bottom(jarak bawah)margin-left(jarak kiri)margin-right(jarak kanan)
Nilai dari setiap margin ditulis dengan angka, satuannya bisa px atau %. Contoh saya buat kotak dengan ketentuan margin:
File belajar_style.css
.kotak {
margin-bottom: 20px;
margin-left: 300px;
margin-top: 100px;
margin-right: 10px;
width: 400px;
height: 300px;
background: red;
}
.kotak1 {
margin-bottom: 20px;
margin-left: 300px;
margin-top: -100px;
margin-right: 10px;
width: 200px;
height: 300px;
background: blue;
}
File balajar.html
<!DOCTYPE html> <html> <head> <title>Belajar Margin dan Padding</title> <link rel="stylesheet" type="text/css" href="belajar_style.css"> </head> <body> <div class="kotak"><h1>Contoh Margin</h1></div> <div class="kotak1"><h1>Contoh Margin</h1></div> </body> </html>
Maka hasilnya adalah:
Kotak warna biru saya beri class kotak1 dengan nilai property margin-top adalah -100px. Sehingga, walaupun margin-bottom dari kotak warna merah adalah 20px, masih kalah dengan -100.
Jadi, kotak warna biru akan naik senilai 80px (20-100px).
Mengatur Padding dengan CSS
Padding adalah property untuk mengatur jarak dalam antar elemen. Sama seperti margin, padding css juga punya nilai properti, yaitu:
padding-top(jarak atas)padding-bottom(jarak bawah)padding-left(jarak kiri)padding-right(jarak kanan)
Langsung praktik saja biar tidak bindung.
File html dengan nama belajar.html
<!DOCTYPE html> <html> <head> <title>Belajar Margin dan Padding</title> <link rel="stylesheet" type="text/css" href="belajar_style.css"> </head> <body> <div class="kotak"><h1>Contoh Margin</h1></div> <div class="kotak1"><h1>Contoh Margin</h1></div> </body> </html>
File belajar_style.css
.kotak {
padding-bottom: 20px;
padding-left: 300px;
padding-top: 100px;
padding-right: 10px;
width: 400px;
height: 300px;
background: red;
}
.kotak1 {
padding-bottom: 20px;
padding-left: 300px;
padding-top: -100px;
padding-right: 10px;
width: 200px;
height: 300px;
background: blue;
}
Maka hasilnya adalah:
Mengapa ukurannya jadi besar? Karena, padding itu mengatur jarak box terluar dengan konten yang di dalamnya.
Misal .kotak panjang sebenarnya hanya 400px, tapi karna punya padding kiri sebesar 300px maka panjangnya jadi 700px. Tapi, kontennya disitu saya tulis Contoh Margin ditulis 300px dari sisi kiri.
Menulis Margin dan Padding satu baris
Nilai atau value dari margin dan padding bisa ditulis dalam satu baris saja. Karena, kalau kita nulis margin-top, margin-bottom, padding-left, padding-right satu persatu akan butuh waktu dan baris yang banyak.
Kasus pertama
Kita bisa menulisnya dengan mendefinisikan margin dan padding saja. Contoh value:
- margin-top: 10px;
- margin-right:50px;
- margin-bottom:20px;
- margin-left: 30px;
Bisa ditulis dalam satu baris margin: 10px 50px 20px 30px. Bagaimana dengan urutannya? Mudah sekali… itu searah jarum jam, jadi yang pertama adalah top, right, bottom, left.
Kasus kedua
- padding-top:20px;
- padding-right:10px;
- padding-bottom:20px;
- padding-left:10px;
Ada 2 nilai variabel yang sama yaitu top=bottom=20px dan right=left=10px. Asalkan nilai atas dengan bawah atau kanan dengan kiri adalah sama maka cukup ditulis sekali, menjadi padding: 20px 10px.
Kasus ketiga
- padding-top:20px;
- padding-right:20px;
- padding-bottom:20px;
- padding-left:20px;
Ada 4 nilai yang semuanya sama. Ini jauh lebih mudah, kita cukup menulisnya sekali, menjadi padding:20px.
Property CSS Margin dan Padding
Berikut ini adalah tabel daftar property css margin dan padding:
| Properti | Keterangan |
|---|---|
| padding | Syntax gabungan menulis semua padding |
| padding-top | Mengatur padding atas |
| padding-right | Mengatur padding kanan |
| padding-left | Mengatur padding kiri |
| padding-bottom | Mengatur padding bawah |
| margin | Syntax gabungan menulis semua margin |
| margin-top | Mengatur margin atas |
| margin-right | Mengatur margin kanan |
| margin-left | Mengatur margin kiri |
| margin-bottom | Mengatur margin bawah |
Itu tadi tutorial margin dan padding pada css. Semoga bermanfaat ya.