Padding adalah area transparent yang terletak diantara konten dengan garis border sebelah dalam suatu elemen HTML. Padding dan margin merupakan bagian yang hampir terlihat sama karena sifatnya yang transparent namun margin berada pada posisi sebelah luar border. Padding berfungsi sebagai ruang bernafas bagi elemen HTML karena di dalam elemen tersebut memiliki ruang kosong yang cukup.
Padding tidak akan terlihat karena sifatnya yang transparent. Namun padding akan bisa dirasakan jelas saat nilai padding diperbesar ataupun diperkecil. Padding memiliki empat buah sisi yaitu padding atas, padding bawah, padding kanan dan padding kiri.
Nilai padding dapat diisi dengan nilai satuan ukuran seperti px, pt, em dan lainnya. Nilai padding nantinya yang digunakan untuk memberi batas antara konten dengan border. Semakin besar nilai padding yang diberikan pada suatu elemen HTML maka jarak antara konten dengan bordernya akan semakin besar.
Padding memiliki penulisan yang agak sedikit berbeda satu dengan lainnya. Hal ini dikarenakan padding memiliki empat buah posisi yang berbeda. Posisi tersebut adalah yaitu padding atas, padding bawah, padding kanan, dan padding kiri.
Cara penulisan pertama :
padding: 20px;
Penulisan ini menggunakan 1 buah nilai yaitu 20px. Cara ini akan menghantam rata dan membuat nilai padding semua sisi pada elemen tersebut bernilai 20px. Nilai padding atas, nilai padding bawah, nilai padding kanan dan nilai padding kiri semuanya adalah 20px;
Cara penulisan ke-dua :
margin: 15px 30px;
Penulisan ini menggunakan 2 buah nilai yaitu 15px dan 30px. Cara penulisan ini untuk mengatur padding 2 arah yaitu padding arah vertikal dan padding arah horisontal. Padding arah vertikal yaitu padding atas dan bawah dengan nilai 15px serta padding arah horisontal yaitu padding kanan dan kiri dengan nilai 30px.
Cara penulisan ke-tiga :
margin: 20px 25px 30px;
Penulisan ini menggunakan 3 buah nilai yaitu 20px, 25px dan 30px. Cara ini digunakan mengatur padding atas, padding arah horisontal (padding kanan dan kiri), dan padding bawah. Masing-masing akan mempunyai : nilai padding atas 20px, padding arah horisontal (padding kanan dan kiri) senilai 25px dan padding bawah senilai 30px.
Cara penulisan ke-empat :
margin: 20px 10px 25px 30px;
Penulisan ini menggunakan 4 buah nilai yaitu 20px, 10px, 25px dan 30px. Cara ini digunakan untuk mengatur sisi padding dimulai dari : padding atas 20px, padding kanan 10px padding bawah 25px dan padding kiri 30px.
Cara penulisan ke-lima :
padding-top: 15px;
padding-bottom: 10px;
padding-right: 25px;
padding-left: 40px;
Penulisan di atas menggunakan nama padding berdasarkan posisinya. padding-top untuk mengatur padding atas sebanyak 15px. Kemudian padding-bottom untuk mengatur padding bawah sebanyak 10px. Penulisan di atas dapat digunakan untuk menata padding pada posisi tersentu saja. Namun tidak jarang semua sisi padding ditulis dengan metode ini tapi tidak disarankan.
Padding digunakan untuk menata halaman agar tersusun rapi. Padding dengan nilai sekitar 10px biasanya sudah cukup untuk mengatur teks agar terlihat rapi dan cukup ruang bernafas. Namun memberikan padding dengan nilai yang besar sering dilakukan untuk mendapatkan suatu efek dan tema tertentu.
Contoh berikut halaman tanpa menggunakan padding dan juga tanpa margin. Halaman tampil secara default dan terlihat tidak ada celah antara elemen satu dengan lainnya begitu pula dengan konten teks dengan border disekelilingnya. Di sinilah peran penting dari padding dan margin.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
color:teal;
font-size: 20px;
border:solid 1px purple;
}
</style>
</head>
<body>
<div>Div tanpa padding dan tanpa margin</div>
<div>Div tanpa padding dan tanpa margin</div>
<div>Div tanpa padding dan tanpa margin</div>
<div>Div tanpa padding dan tanpa margin</div>
<div>Div tanpa padding dan tanpa margin</div>
</body>
</html>
Contoh berikut adalah penggunaan padding pada elemen <div> yang berisi teks.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
color:teal;
font-size: 20px;
border:solid 1px purple;
}
</style>
</head>
<body>
<div style="padding: 10px;border-color: purple;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
<div style="padding: 20px 50px;border-color: red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
<div style="padding: 30px 40px 30px 60px;border-color: cyan;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
<div style="padding-left: 30px;border-color: magenta;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
</body>
</html>
Pada div pertama menggunakan padding untuk semua sisi dengan nilai 10px. Elemen div ke-dua menggunakan padding vertikal atas bawah sebesar 20px dan padding horisontal kanan kiri sebesar 50px. Pada div ke-dua ini terlihat jelas padding horisontalnya menjorok ke dalam elemen, dan untuk kasus tertentu hal ini biasa dilakukan.
Pada div yang ke-empat, padding yang digunakan hanya padding kiri dengan nilai 30px. Posisi teks terlihat sempit dan kurang nyaman karena margin kiri saja yang diatur nilainya.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
