Wednesday 16 January 2013

Fungsi Padding, Jenis Dan Contohnya


-Pengertian Padding
Padding adalah salah satu bagian dari properti dalam CSS (Cascading Style Sheet). Apa itu CSS? Silahkan klik disini untuk informasi lebih akurat. CSS ini bersifat melekat / menempel pada tag html atau dalam english nya embeded.

-Fungsi Padding
Padding mempunyai fungsi sebagai pemberi jarak antara baris atau jarak antara suatu objek dengan objek - objek yang berada didalam objek tersebut

-Contoh - contoh padding
 Padding mempunyai bagian - bagian atau properti antara lain :
  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left
Sedangkan nilai atau value dari padding antara lain :
  • % (persen)
  • Pixel (px)
  • Em , in dan pt
Berikut contoh kode nya :

-contoh kode 1
padding
perhatikan jarak antara teks dengan garis border berwarna merah

<div style="background-color: blue; border-top-color: red; border-top-style: solid; border-top-width: 5px; height: auto; width: 300px;padding:10px;">
C O N T O H
I S I / T E K S
A N D A
</div>

maka tampilan out put nya akan seperti dibawah ini

C O N T O H
I S I / T E K S
A N D A


-contoh kode2
padding-top:
perhatikan jarak antara teks dengan garis border berwarna merah

<div style="background-color: blue; border-top-color: red; border-top-style: solid; border-top-width: 5px; height: auto; width: 300px;padding-top:10px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini

C O N T O H
I S I / T E K S
A N D A

-contoh kode 3
padding-bottom;
perhatikan jarak antara teks dengan garis border berwarna merah

<div style="background-color: blue; border-top-color: red; border-top-style: solid; border-top-width: 5px; height: auto; width: 300px;padding-bottom:10px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini

C O N T O H
I S I / T E K S
A N D A


--------------------------------------------------------------------

Selain dari jenis kode diatas ada juga kode yang bisa disingkat atau disebut shorthand, berikut penjelasan nya. Silahkan klik disini untuk contoh - contoh kode padding lain nya.
pengertian padding, fungsi dan contoh - contohnya V.2

Padding Shorthand (disingkat)
Shorthand adalah penulisan kode secara singkat

Berikut aturan dalam kode css nya :
  • padding:value1;...... ini sama juga dengan padding-top:value1; padding-right:value1; padding-bottom:value1; padding-left:value1; (* memiliki nilai sama)
  • padding:value1 value2;..... ini sama juga dengan padding-top:value1; padding-bottom:value1, dan padding-right:value2; padding-left:value2; */
  • padding:value1 value2 value3;..... ini sama juga dengan padding-top:value1; padding-right:value2;padding-left:value2; padding-bottom:value3;*/
  • padding:value1 value2 value3 value4;..... ini sama juga dengan padding-top:value1; padding-right:value2; padding-bottom:value3;padding-left:value4;
berikut contoh kodenya : silahkan klik disini untuk contoh - contoh kode padding diatas, dalam pengertian padding, fungsi dan contoh - contohnya V.2

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang pengertian padding, fungsi dan contoh - contohnya

Terima Kasih.
 

2 comments: