Padding CSS

Padding CSS bisa kamu gunakan untuk merubah nilai default padding di berbagai macam element HTML seperti paragraph dan table. Tetapi sebelumnya kamu harus sudah mengerti apa itu padding. Padding adalah jarak antara border dan content.

Untuk memudahkan melihat efek dari padding maka contoh dibawah sudah dilengkapi dengan code border.

Code CSS padding:

p {padding: 20px; border: 1px solid red; }
h4 {padding: 0px; border: 1px solid red;}

Hasil code CSS padding:

Paragraph ini punya nilai padding yang sama untuk semua sisinya yaitu 20 pixel

Header h4 ini tidak memakai padding karena valuenya diisi 0px

Value gabungan

Dari dua contoh padding diatas kamu bisa melihat bahwa kita menggunakan satu value untuk semua sisi padding (top, right, bottom, left). Sebagai contoh tambahan, kamu juga bisa menggunakan value padding dalam persen.

Code CSS padding:

p {padding: 4%; border: 1px solid red; }
h4 {padding: 0px; border: 1px solid red;}

Hasil code CSS padding:

Paragraph ini memakai persen sebagai value padding untuk setiap sisinya.

Header h4 ini tidak memakai padding.

Padding-direction

Setiap element HTML sebenarnya memiliki empat sisi padding yaitu top, right, bottom, dan left. Dengan padding-direction maka kamu bisa memodifikasi padding dengan lebih detail untuk masing-masing sisi padding.

Code CSS padding-direction:

p { padding-top: 25px; border: 1px solid red; }
h4 {
padding-top: 0px;
padding-right: 2px;
padding-bottom: 23px;
padding-left: 31px;
border: 1px solid red;
}

Hasil code CSS padding-direction:

Paragraph ini hanya memakai satu padding-direction.

Header h4 ini memiliki empat padding-direction.

Kalau kamu hanya menuliskan satu sisi padding saja maka padding yang lainnya akan mengikuti default. Misalkan saja kamu hanya menuliskan padding-top saja sedangkan padding yang lainnya tidak kamu tuliskan.

Value 2 & 4

Value dari empat sisi padding bisa didefinisikan hanya dengan dua value atau empat value.

Saat kamu menggunakan dua value maka value yang pertama untuk padding top dan bottom. Value yang kedua untuk padding left dan right.

Padding dengan empat value bisa kamu gunakan untuk mendefiniskan empat value padding secara berurutan yaitu top, right, bottom, left. Untuk memudahkan mengingatnya kamu bisa bisa membayangkan dengan putaran jam yang berawal dari atas, kanan, bawah, lalu terakhir di kiri.

Contoh di bawah menunjukkan padding dengan dua value dan empat value secara berurutan.

Code CSS padding 2 & 4:

p {
padding: 5px 35px;
border: 1px solid red;
}
h4{
padding: 0px 5px 30px 3px;
border: 1px solid red;
}

Hasil code CSS padding 2 & 4:

Value margin pertama dari paragraph ini untuk padding top dan padding bottom. Sedangkan value kedua untuk padding left dan right.

Header h4 ini memiliki padding value secara berurutan yaitu top 0px, right 5 px, bottom 30px, dan left 3px.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>