Belajar CSS

css : Properties Untuk Mengatur Padding

Padding digunakan untuk mengatur jarak antara konten dan border.

padingbordermargin

Untuk format penulisan properti padding di css ada beberapa cara yang bisa digunakan yaitu :

  • format penulisan padding dengan 4 value :

padding : valueT valueR valueB valueL;

keterangan :

valueT           : untuk mengatur jarak padding  top (bagian atas).

valueR           : untuk mengatur jarak padding right (bagian kanan).

valueB           : untuk mengatur jarak padding bottom (bagian bawah).

valueL            : untuk mengatur jarak padding left (bagian kiri).

 

  • format penulisan padding dengan 3 value :

padding : valueT  valueRL  valueB ;

keterangan :

valueT           : untuk mengatur jarak padding top (bagian atas).

valueRL         :untuk mengatur jarak padding right (bagian kanan) dan left (bagian kiri).

valueB           : untuk mengatur jarak padding bottom (bagian bawah).

  • format penulisan padding dengan 2 value :

padding : valueTB  valueLR  ;

keterangan :

valueTB        : untuk mengatur jarak padding top (bagian atas) dan bottom (bagian bawah).

valueLR         : untuk mengatur jarak padding left (bagian kiri) dan right (bagian kanan).

  • format penulisan padding dengan 1 value :

padding : value  ;

keterangan :

format penulisan padding dengan 1 value ,artinya value (top,right,bottom,left) sudah ditentukan  nilainya oleh 1 value tersebut.

  • format penulisan padding secara detail (individu) :

padding-top: value;

padding-right: value;

padding-bottom: value;

padding-left: value;

keterangan :

padding-top             : untuk mengatur jarak padding top(bagian atas).

padding-right          : untuk mengatur jarak padding right(bagian kanan).

padding-bottom      : untuk mengatur jarak padding bottom(bagian bawah).

padding-left             : untuk mengatur jarak padding left(bagian kiri).

untuk memberian value-nya bisa menggunakan length/panjang angka dalam (px, em, in, cm) atau persentage (%).

contoh

padding

LEAVE A REPLY

Please enter your comment!
Please enter your name here