CSS Padding

Sama halnya dengan margin, css padding adalah kebalikannya yaitu digunakan untuk membuat jarak ke dalam pada sebuah element. Contohnya seperti dibawah ini :

<!DOCTYPE html>

<html>

<head>

</head>

body{

display: flex;

}

.box-1{

width: 150px;

height: 100px;

background: #58886c;

margin: 20px;

padding: 20px;

}

.box-2{

width: 150px;

height: 100px;

background: #58886c;

margin: 20px;

}

</style>

<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

</div>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

</div>

</body>

</html>

Pada contoh diatas saya membuat 2 box yang mana box-1 memakai padding dan box-2 tidak memakai padding. Bisa kalian bandingkan diantara keduanya, pastinya paragraf box-1 memiliki jarak dengan box dan paragraf box-2 tidak memiliki jarak. Karena pada class box-1 sudah kita beri padding otomatis box akan memberikan jarak ke dalam.

shorthand padding dengan 4 value :

padding: 20px 10px 25px 15px;

shorthand diatas dapat diartikan :

padding-top: 20px;

padding-right: 10px;

padding-bottom: 25px;

padding-left: 15px;

shorthand padding dengan 3 value :

padding: 20px 25px 15px;

shorthand diatas dapat diartikan :

padding-top: 20px;

padding-right: 25px;

padding-bottom: 15px;

padding-left: 25px;

shorthand padding dengan 2 value :

padding: 20px 15px;

shorthand diatas dapat diartikan :

padding-top: 20px;

padding-right: 15px;

padding-bottom: 20px;

padding-left:15px;

shorthand padding dengan 1 value :

padding: 20px;

shorthand diatas dapat diartikan :

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

padding-left:20px;

Untuk property padding sama halnya dengan property margin perbedaannya hanya pada fungsi, jika margin adalah jarak ke luar maka padding adalah jarak ke dalam.

Selamat belajar.