You are here: » » » FUNGSI PROPERTY PADDING SERTA VALUENYA

FUNGSI PROPERTY PADDING SERTA VALUENYA

21.20 killer


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:
Label: , ,


Responses

0 Respones to "FUNGSI PROPERTY PADDING SERTA VALUENYA"

Posting Komentar

Langganan: Posting Komentar (Atom)

My Sponsor

 
Return to top of page Copyright © 2012 | My Design Web Converted into Blogger Template by Gusmanto