Tujuan nya menata Margin dan padding di sebuah website agar Teks di Artikel kita lebih rapi dan tertata dan rapi, Kita bisa menambahkan margin dan padding di sebuah elemen, Margin fungsinya menentukan jarak konten dari tepi batas elemen, Berikut contoh kodenya dan penjelasan nya :
<!DOCTYPE html>
<html>
<head>
<title>Menata Margin dan Padding</title>
<style>
.satu, .dua, .empat, .kotak {background-color: #ccc;}
.satu {
margin: 20px;
padding: 40px;
}
.dua {
margin: 20px 40px;
padding: 10px;
}
.empat {
margin: 0 10px 20px 30px;
padding: 10px 20px;
}
.kotak {
margin-top: auto;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 30px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
</style>
</head>
<body>
<p class="satu">Margin 20px semua - Padding 40px semua.</p>
<p class="dua">Margin atas dan bawah 20px - kiri dan kanan 40px. Padding 10px semua.</p>
<p class="empat">Margin atas 0, kanan 10px, bawah 20px, kiri 30px, Padding atas dan bawah 10px, kiri dan kanan 20px.</p>
<p class="kotak">Margin dan Padding dideklarasikan satu per satu (atas, kanan, bawah, dan kiri).</p>
</body>
</html>
Bentuk dari margin bisa agan pahami apa yang harus agan terapkan dalam website agan, Nah berikut juga penjelasan dari property yang kita gunakan tadi :
# Margin
Adalah mengatur seluruh property margin dalam satu deklarasi, Nilai angka dengan satuan atau Auto.
Jika nilainya hanya satu maka aturan berlakunya untuk pada jarak "atas, kanan, bawah, dan kiri" Searahan kompas,
Nah jika seandainya nilainya ada dua maka nilai pertama berlaku untuk jarak kiri dan kanan. Default yang sesuai dengan Properti tunggal.
# Margin-Bottom
Yaitu mengatur margin bawah sebuah elemen. Nilai angka satuan. Default nya 0
# Margin-Left
Opsi nilainya adalah Mengatur margin kiri sebuah elemen, nilainya dengan satuan angka Default nya 0.
# Margin-right
Mengatur margin kanan suatu elemen nilainya pun sama dengan satuan, Default nya 0
# Margin-Top
Mengatur margin atas sebuah elemen, Nilai angka nya juga dengan satuan, Default nya 0.
# Padding
Yaitu mengatu seluruh Property padding dalam suatu Deklarasi.
Nilai angkanya dengan satuan, Sama seperti margin nilainya bisa satu untuk membuat semua sisi atau ditentukan masing masing. Defaultnya sesuai properti tunggal nya.
# Padding-bottom
Yaitu mengatur padding bawah sebuah elemen, Nilai angkanya dengan satuan, Default nya juga 0.
# Padding-left
Yaitu mengatur padding kiri seuatu elemen, Nilai angkanya dengan satuan, Default nya juga 0.
# Padding-right
yaitu Mengatur padding kanan suatu elemen, Nilai angkanya dengan satuan, Default nya juga 0.
# padding-top
Yaitu mrngatur padding atas di sebuah elemen Nilai angkanya dengan satuan, Default nya juga 0.
Terima Kasih
0 komentar