Halo semuanya, bagi kalian yang baru belajar pemrograman web pasti bingung apa perbedaan padding dan margin. berikut adalah gambaran yang saya buat. Pertama saya membuat file index.html terlebih dahulu yang isinya sebagai berikut
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Perbedaan Padding dan Margin</title>
</head>
<body>
<div class="ini-padding">ini Padding</div>
<div>ini baris selanjutnya</div>
<div class="ini-margin">ini Margin</div>
<div>ini baris selanjutnya</div>
</body>
</html>
dan kemudian membuat file style.css untuk memberikan padding dan margin pada setiap class
.ini-padding {
padding: 15px;
}
.ini-margin {
margin: 15px;
}
Kemudian ini adalah tampilannya
Sekilas terlihat sama, tapi sebenarnya tidak. Perbedaan antara padding dan margin terletak pada cara masing-masing memberikan jarak. Padding memberikan jarak kedalam sedangkan margin memberikan jarak keluar. Untuk memberikan gambarang berikut saya tambahkan border pada masing-masing class
Nah bisa dilihat, padding memberikan jarak kedalam sehingga border dan isi paragraf tidak bersentuhan. Sedangkan margin memberikan jarak keluar sehingga border dan isi paragraf tidak berubah tetapi isi paragraf selanjutnya dan sebelumnya berjarak.
Semoga paham dengan penjelasan saya, happy coding and have a nice day
Blog "Adiozh" 