Fungsi Padding, Jenis Dan Contohnya V.2

Sebelumnya kita sudah membahas pengertian padding, fungsi dan contoh - contohnya di bagian pertama, silahkan klik disini untuk membacanya.

-Pengertian Padding

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

-Contoh - contoh padding

 Padding mempunyai bagian - bagian atau properti antara lain :

• Padding-top
• Padding-right
• Padding-bottom
• Padding-left 

Selain dari jenis kode diatas ada juga kode yang bisa disingkat atau disebut shorthand, berikut penjelasan nya.

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 yang 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 :

• padding value 1

contoh: kita ingin mengisi nilai value 1 = 10px, maka nilai value 1 tersebut adalah :

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

contoh kode 4
padding-shorthand

<div style="background-color:blue;width:300px;clear:both;padding:10px;">
<div style="background-color:red;clear:both;">
C O N T O H
I S I / T E K S
A N D A
</div>
<div style="clear:both;"></div>
</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

• Padding value 1 value 2

contoh: kita ingin mengisi nilai nilai value 1 = 10px, value 2 = 20px, maka nilai value tersebut  adalah :

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

contoh kode 5

<div style="background-color:blue;width:300px;clear:both;padding:10px 20px;">
<div style="background-color:red;clear:both;">
C O N T O H
I S I / T E K S
A N D A
</div>
<div style="clear:both;"></div>
</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

Padding value 1, value 2 dan value 3

contoh: kita ingin mengisi nilai value 1 = 10px, value 2 = 20px, value 3 = 30px, maka nilai value tersebut adalah :

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;

contoh kode 6

<div style="background-color:blue;width:300px;clear:both;padding:10px 20px 30px;">
<div style="background-color:red;clear:both;">
C O N T O H
I S I / T E K S
A N D A
</div>
<div style="clear:both;"></div>
</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

• Padding value 1, value 2, value 3, value 4

contoh: kita ingin mengisi nilai value 1 = 10px, value 2 = 20px, value 3 = 30px, value 4 = 40px, maka nilai value tersebut adalah :

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

contoh kode 7
 

<div style="background-color:blue;width:300px;clear:both;padding:10px 20px 30px 40px;">
<div style="background-color:red;clear:both;">
C O N T O H
I S I / T E K S
A N D A
</div>
<div style="clear:both;"></div>
</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

Untuk contoh - contoh padding lain nya silahkan klik disini tentang pengertian padding, fungsi dan contoh - contohnya


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