Properti CSS padding digunakan untuk menghasilkan ruang kosong di sekitar konten suatu elemen, di dalam batas (border) yang ditentukan.
Berbeda dengan margin yang berada di luar border, area padding akan ikut terwarnai jika elemen memiliki warna latar belakang (background-color).
<!DOCTYPE html>
<html>
<head>
<style>
.kotak-sempit { background: #fee2e2; border: 2px solid #ef4444; padding: 5px; margin-bottom: 10px; }
.kotak-lega { background: #dcfce7; border: 2px solid #22c55e; padding: 25px; }
</style>
</head>
<body>
<div class="kotak-sempit">Padding 5px: Teks terasa sesak dan mepet ke garis border.</div>
<div class="kotak-lega">Padding 25px: Teks terasa sangat lega, nyaman dibaca, dan elegan.</div>
</body>
</html>Padding yang cukup adalah rahasia membuat desain website terlihat modern dan tidak kaku.
Di manakah posisi ruang padding pada suatu elemen?