CSS - Padding

Properti padding CSS digunakan untuk membuatn ruang di sekitar konten elemen, di dalam batas yang ditentukan.

Dengan CSS,kita memiliki kontrol penuh atas padding. Pada padding terdapat properti untuk mengatur setiap sisi elemen padding diantaranya  top, right, bottom, and left.

CSS

.incrud-padding-1 {

  padding: 60px;

}

Elemen tersebut ini memiliki padding 60px di setiap sisi

Padding – Satu sisi

CSS Padding memiliki properti untuk menentukan nilai padding untuk setiap sisi elemen:

• padding-top
• padding-right
• padding-bottom
• padding-left

Contoh berikut mengatur padding berbeda di  keempat sisi elemen :

CSS

.incrud-padding-2 {

  padding-top: 20px;

  padding-bottom: 100px;

  padding-right: 50px;

  padding-left: 80px;

}

Elemen tersebut memiliki nilai padding yang berbeda di setiap sisinya

Penulisan Properti pada padding

Untuk mempersingkat kode, dimungkinkan untuk menentukan nilai semua sisi properti dengan satu nilai atau banyak nilai;

Berikut contohnya ;

  padding: 60px;

Pada setiap sisi padding tersebut memiliki nilai yang sama yaitu 25px.

Atau

  padding-top: 20px 100px 50px 80px;

properti padding empat tersebut adalah seperti dibawah ini (berputar searah jarum jam):

• top padding is 20px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px

Contoh penulisan css

CSS

.incrud-padding-3 {

  padding: 20px 100px 50px 80px;

}

Pada gambar diatas terlihat bahwa jarak antar konten dan border sama dengan contoh padding dengan penulisan satu per satu.

Cara Penulisan terakhir property padding adalah dengan dua nilai properti seperti berikut;

padding: 20px 80px;

maksud dari penulisan tersebut ,20px merupakan nilai padding atas dan bawah(top, bottom) dan 80px kanan dan kiri(left , right)

berikut penulisan penuh CSS;

.incrud-padding-4 {

padding: 20px 80px;

}

 

Demikian artikel mengenai tutorial CSS Padding, semoga bermanfaat

Share this post