Padding adalah satu dari beberapa property dalam css, sedangkan fungsi padding adalah pemberian jarak atau batas(bagian dalam) pada suatu tag/box/bidang html.
Fungsi Css Padding Menurut W3scholl Adalah
- Mendefinisikan ruang antara pembatasan elemen dan isi elemen
Fungsi Css Padding Menurut Buku Yang Saya Baca Adalah
- Pemberian jarak antara atau batas antara suatu objek dengan objek-objek yang berada di dalam objek tersebut
Fungsi Padding Menurut Saya Adalah
- Pemberian jarak bagian dalam pada suatu tag html
Terserah mau pilih mana, yang terpenting adalah kita sama-sama ngerti fungsi padding
Property Padding Antara Lain
Berikut property padding;
- Padding-top
- Padding-right
- Padding-bottom
- Padding-left
- Padding(khusus shorthand)
Sedangkan Value Dari Padding Adalah
Value padding
- Angka(pangjang) dalam px(pixel)
- %
- Em, in dan pt
- Yang paling sering saya gunakan hanya px dan %
Contoh Padding Dalam Inline Style
Berikut beberapa kode dan tampilan tag html menggunakan style padding, anggap yang berwarna hijau dan biru adalah padding
Padding-Top
Padding-top fungsinya untuk memberikan jarak dalam bagian atas
Contoh kode
<div style="background-color:lime;width:100px;clear:both;padding-top:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding-Right
Padding-top fungsinya untuk memberikan jarak dalam bagian kanan
contoh kode
<div style="background-color:lime;width:100px;clear:both;padding-right:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan!
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding-Bottom
Padding-top fungsinya untuk memberikan jarak dalam bagian bawah
contoh kode
<div style="background-color:lime;width:100px;clear:both;padding-bottom:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan!
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding-Left
Padding-top fungsinya untuk memberikan jarak dalam bagian kiri
contoh kode
<div style="background-color:lime;width:100px;clear:both;padding-left:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan!
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Kita bisa menulis beberapa padding tapi ngga boleh ada property yang sama didalam 1 tag, id maupun class
Contoh kode
<div style="background-color:lime;width:100px;clear:both;padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Shorthand Padding
Shorthand adalah teknik penulisan style css secara singkat. property padding ini juga support dengan teknik shorthand. penulisan padding dengan shorthand contohnya seperti ini
Padding:value;
Jadi dalam teknik shorthand kita tidak lagi mengenal padding-right, padding-left, padding-bottom, padding-top karena property top, right, bottom dan left sudah diwakili dengan padding
Adapaun aturanya, seperti ini
- Padding:value1;/*ini sama dengan padding-top:value1; padding-right:value1; padding-bottom:value1; padding-left:value1; memiliki nilai sama */
- Padding:value1 valaue2;/* ini sama dengan padding-top:value1; padding-bottom:value1, dan padding-right:value2; padding-left:value2; */
- Padding:value1 valaue2 valaue3;/* ini sama dengan padding-top:value1; padding-right:value2;padding-left:value2; padding-bottom:value3;*/
- Padding:value1 valaue2 valaue3 value4;/*ini sama dengan padding-top:value1; padding-right:value2; padding-bottom:value3;padding-left:value4;*/
Dari pada bingung lihat contoh dibawah!
Padding:value1;
Misal kita mengisi value1=10px, maka sama dengan
Padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
Contoh code
<div style="background-color:blue;width:100px;clear:both;padding:10px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding: Value1 Value2;
Misal value1=10px dan value2=20px, maka sama dengan
Padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
Contoh code
<div style="background-color:blue;width:100px;clear:both;padding:10px 20px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding: Value1 Value2 Value3;
Misal value1=10px, value2=20px dan value3=30px, maka sama dengan
Padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;
Contoh code
<div style="background-color:blue;width:100px;clear:both;padding:10px 20px 30px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding: Value1 Value2 Value3 Value4;
Misal value1=10px, value2=20px, value3=30px dan value4, maka sama dengan
Padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
Contoh code
<div style="background-color:blue;width:100px;clear:both;padding:10px 20px 30px 40px;">
<div style="background-color:yellow;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
Tampilan
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
Padding Dalam Internal Style
Pada contoh diatas, kita mempraktekanya dalam inline style. untuk code penerapan dalam internal style, sebagai berikut
<html>
<head>
<title>padding css</title>
<style type="text/css">
p{margin:0;/**/padding:0;/**/background-color:red;/**/}
#misalpadding1{
padding-top:20px;/*pemberian padding/lapisan/jarak-dalam atas sebesar 20px*/
}
#misalpadding2{
padding-right:30px;/*pemberian padding/lapisan/jarak-dalam kanan sebesar 30px*/
}
#misalpadding3{
padding-bottom:40px;/*pemberian padding/lapisan/jarak-dalam bawah sebesar 40px*/
}
#misalpadding4{
padding-left:50px;/*pemberian padding/lapisan/jarak-dalam kiri sebesar 50px*/
}
#misalpadding5{
padding-top:20px;/*pemberian padding/lapisan/jarak-dalam atas sebesar 20px*/
padding-right:0;/*pemberian padding/lapisan/jarak-dalam kanan sebesar 0*/
padding-bottom:30px;/*pemberian padding/lapisan/jarak-dalam bawah sebesar 30px*/
padding-left:50px;/*pemberian padding/lapisan/jarak-dalam kiri sebesar 50px*/
}
#misalpadding6{
padding:20px;/*masing-masing diberi nilai 20px*/
}
#misalpadding7{
padding:20px 50px;/*atas bawah sebesar 20p,kiri kanan sebesar 50px*/
}
#misalpadding8{
padding:10px 50px 80px;/* atas 10px, kiri-kanan 50px, bawah 80px*/
}
#misalpadding9{
padding:20px 30px 40px 50px;/*atas 10px, kanan 20px, bawah 30px, kiri 50px, arah nilai sesuai putaran jarum jam, dimulai dari atas!*/
}
.anggapsebagaikotak{
clear:both;/**/
margin-bottom:40px;/**/
background-color:blue;/**/
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalpadding1">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding2">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding3">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding4">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding5">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding6">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding7">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding8">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
<div class="anggapsebagaikotak" id="misalpadding9">
<p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p><p>diisi text atau content</p>
</div>
<!--//end salam www.indaam.com-->
</body>
</html>
Untuk melihat hasilnya
- Copy markup style diatas
- Paste ke notepad
- Save as (pilih all types) dengan nama paddingcss.htm
- Jalankan(double click), atau
- Open with (firefox, ie, opera, safari, chrome)
- Silakan edit valuenya
- Selamat belajar
Khusus valuenya, saya lebih sering menggunakan px atau % sedangkan pt, em ngga pernah
semoga bermafaat
