.jpeg)
Margin merupakan batas atau jarak antar element ataupun objek. Jadi, antar element tidak menyatu menjadi satu. Sedangkan Padding adalah batas antar konten atau objek yang berada dalam satu element. Jika kamu masih kurang memahami, saya akan memberikan sedikit contoh agar lebih jelas mengenai Padding dan Margin.
Konten Pertama
Konten Kedua
Konten Pertama
Konten Kedua
Setelah mengetahui perbedaan antara margin dan padding, sekarang kita akan masuk ke pembahasan codingan nya. Untuk membuat jarak, kita bisa menggunakan berbagai syntax. Berikut ini adalah macam macam syntax nya.
Sekarang kita akan membahas codingan nya. Berikut ini adalah contoh penggunaan margin
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Margin</title>
<style>
.kotak1
{
background-color:blue;
margin-top:40px;
margin-left:30px;
width:200px;
height:200px;
}
.kotak2
{
background-color:red;
margin-top:30px;
margin-left:10px;
width:200px;
height:200px;
}
</style>
</head>
<body>
<p class="kotak1">Konten Pertama</p>
<p class="kotak2">Konten Kedua</p>
</body>
</html>
Konten Pertama
Konten Kedua
Sekarang kita akan membahas syntax padding beserta codingan nya. Berikut ini contoh codingan penggunaan padding
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Padding</title>
<style>
.padding1
{
background-color:yellow;
padding-top:40px;
padding-left:30px;
width:200px;
height:200px;
}
.padding2
{
background-color:red;
padding-top:30px;
padding-left:70px;
width:200px;
height:200px;
}
</style>
</head>
<body>
<p class="padding1">Konten Pertama</p>
<p class="padding2">Konten Kedua</p>
</body>
</html>Konten Pertama
Konten Kedua
Kesimpulan :
Sebenarnya Padding dengan Margin memiliki fungsi yang sama, yaitu untuk memberikan jarak. Seperti contoh diatas, penggunaan margin digunakan untuk memberikan jarak antara objek pertama dengan objek kedua dan penggunaan padding digunakan untuk memberikan jarak antara objek dengan objek yang berada di dalam nya. Contoh nya dapat kita lihat pada contoh padding, yaitu memberikan jarak antara paragraf dengan background nya. Kamu bisa menambahkan syntax lainnya seperti padding-right, padding-bottom, margin-right dan syntax lainnya sesuai keinginan mu. Sekian yang dapat saya sampaikan, jika ada yang mengerti harap bertanya di kolom komentar. Sekian dan terimakasih.