Disini kita akan membahas pengertian padding, fungsi dan contoh - 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>
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
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>
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
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>
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
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
sangat membantu untuk tugas kuliah saya
ReplyDeletethanks kakak
semoga cepat lulus ya
Delete