Jika dalam tutorial sebelumnya kita telah membahas mengenai cara mengatur margin pada css, dalam tutorial ini kita akan membahas mengenai padding.
Padding memiliki fungsi yang hampir sama dengan margin, jika margin digunakan untuk mengatur jarak luar dari obyek, padding digunakan untuk mengatur jarak dalam dari obyek.
Ilustrasi perbedaan dari margin dan padding adalah seperti berikut ini :
Nah coba perhatikan gambar diatas :
- Margin adalah jarak luar dari objek, jadi jarak 1 obyek dengan objek lainnya itu diatur pada margin, margin di hitung dari border ke sisi luar.
- Padding adalah jarak dalam dari objek, jadi didalam obyek pasti memiliki content, nah jarak dari border obyek dan content itu diatur pada padding.
Untuk penggunaan dari property padding hampir sama dengan penggunaan property margin, silahkan perhatikan skrip berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Padding Css</title>
<style type="text/css">
div
{
border:solid black 1px;
padding-top:100px;
padding-right:200px;
padding-left:25px;
padding-bottom:50px;
}
p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>Ini adalah Paragraf</p>
</div>
</body>
</html>semisal kita simpan dengan nama padding_css.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :
Penjelasannya adalah sebagai berikut :
pada skrip diatas kita membuat sebuah tag div yang digunakan untuk membuat sebuah obyek dan kita berikan border agar memiliki garis, agar teman teman bisa lebih bagaimana padding dalam mengatur jarak dari border ke content, paragraf diatas yang memiliki background warna kuning itu adalah content, penjelasannya dari padding adalah sebagai berikut :
- Set padding-top : 100px yang membuat jarak antara paragraf dan border atas obyek sebesar 100 pixel
- Set padding-right: 200px yang membuat jarak antara paragraf dan border kanan obyek sebesar 200 pixel
- Set padding-bottom: 50px yang membuat jarak antara paragraf dan border bawah obyek sebesar 50 pixel
- Set padding-left: 25px yang membuat jarak antara paragraf dan border kiri obyek sebesar 25 pixel
Padding – Shorthand Property
Anda juga bisa menuliskan setting padding dengan menggunakan shorthand property, 4 bagian padding bisa anda tuliskan dalam 1 baris skrip saja, silahkan perhatikan skrip dibawah ini :
<style type="text/css">
div
{
padding:100px 200px 25px 50px;
}
</style>dalam skrip diatas kita menggunakan shorthand property untuk padding, penjelasan dari skrip diatas adalah :
- Bagian padding atas memiliki nilai 100px
- Bagian padding kanan memiliki nilai 200px
- Bagian padding bawah memiliki nilai 25px
- Bagian padding kiri memiliki nilai 50px
jadi cara menuliskannya adalah dari atas, kanan, bawah, dan kiri (searah jarum jam).
Bagaimana teman – teman mudah bukan mengatur padding pada css, silahkan jika ada yang ingin didiskusikan di kolom komentar, sampai jumpa di tutorial berikutnya.