Padding CSS adalah salah satu properti CSS yang memungkinkan kita untuk menambahkan ruang di dalam elemen, tetapi di luar kontennya. Dengan kata lain, padding berada di antara batas konten dan batas elemen (border). Properti padding sering digunakan untuk meningkatkan keterbacaan dan estetika tata letak halaman web.
Penerapan Padding CSS
CSS menyediakan beberapa cara untuk menetapkan padding:
PaddingUmum: Mengatur padding untuk semua sisi elemen dengan satu nilai.
padding: 10px;
Padding Individual: Mengatur padding untuk setiap sisi elemen dengan nilai yang berbeda
padding-top
padding-right
padding-bottom
padding-left
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
Padding Singkat: Mengatur padding untuk beberapa sisi elemen sekaligus
/* top & bottom, right & left */
padding: 10px 15px;
/* top, right & left, bottom */
padding: 10px 15px 20px;
/* top, right, bottom, left */
padding: 10px 15px 20px 25px;
Contoh
Misalkan kita memiliki sebuah kotak teks yang ingin diberikan padding untuk meningkatkan keterbacaan. Tanpa padding, teks mungkin akan menempel terlalu dekat dengan batas kotak
- HTML
<div class=”text-box”>
Halo, selamat datang di website kami!
</div>
- CSS (tanpa padding):
border: 1px solid black;
}
- CSS (dengan padding):
border: 1px solid black;
padding: 15px;
}
Dengan menambahkan padding sebesar 15px, teks di dalam .text-box akan memiliki jarak dari batas kotak, sehingga tampak lebih lega dan mudah dibaca.
Contoh Padding HTML/CSS Lengkap
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contoh </title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”card”>
<h2>Judul Kartu</h2>
<p>Ini adalah deskripsi singkat tentang konten kartu ini. Padding membantu teks ini tampak lega dan mudah dibaca.</p>
</div>
</body>
</html>
.card {
border: 1px solid #e0e0e0;
border-radius: 5px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Padding */
padding: 20px;
}
.card h2 {
margin-top: 0;
}
.card p {
margin: 10px 0;
}
Dalam contoh di atas, elemen dengan kelas .card diberikan padding sebesar 20px di semua sisi. Ini membuat konten di dalam kartu memiliki jarak dari tepi kartu, memberikan tampilan yang lebih lega dan estetis. Padding ini, dikombinasikan dengan gaya lain seperti border, border-radius, dan box-shadow, membuat elemen kartu tampak lebih profesional dan menarik.
Kesimpulan
Padding adalah salah satu properti esensial dalam CSS yang membantu dalam desain dan tata letak halaman web. Dengan pemahaman yang benar tentang cara kerja padding, seorang pengembang dapat meningkatkan UX (User Experience) dan desain halaman web dengan mudah.
Â
