FUNGSI PROPERTY PADDING SERTA VALUENYA

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

Artikel Terkait:

html

• Daftar Kode Warna Web
• Membuat tulisan berjalan dengan HTML
• Membuat Artikel Terkait Horizontal dengan Thumbnail
• Membuat Artikel Terkait Horizontal dengan Thumbnail
• Membuat Form Registrasi Menggunakan HTML 5 dan CSS3
• Contoh Form Registrasi
• Kumpulan Efek - Efek Blog ( Lengkap )
• Download Ebook Dasar-dasar Design Web

FUNGSI PROPERTY PADDING SERTA VALUENYA

css

• Software gratis editor css
• Membuat form login dengan css
• Membuat Form Registrasi Menggunakan HTML 5 dan CSS3
• Download Ebook Dasar-dasar CSS