Margin CSS berfungsi untuk memberikan ruangan di luar sebuah elemen, di luar border dari sebuah elemen. Berbeda dengan padding CSS yang memberikan ruang di sebelah dalam elemen.

Padding sebuah elemen bisa diatur dengan property:

  • padding-top : memberikan jarang sebelah atas di dalam elemen.
  • padding-bottom : memberikan jarang sebelah bawah di dalam elemen.
  • padding-left : memberikan jarang sebelah kiri di dalam elemen.
  • padding-right : memberikan jarang sebelah kanan di dalam elemen.

Atau kami bisa mengatur semua padding dengan property paddingsekaligus.

Adapun value dalam padding bisa berupa:

  • pixel: contohnya 100px
  • %: contohnya 10%
  • inherit

Padding Shorthand

Seperti yang kita bahas diatas, kamu bisa memanggil padding dengan shorthand tanpa harus memanggil satu persatu padding property.

Susunannya:

padding:top_value right_value buttom_value left_value;

atau

padding:y_axis_value x_axis_value;

Kurang mengerti? Liat contohnya ya.

padding:10px 20px 30px 40px;

Penjelasan: Dari padding diatas, akan memberikan nilai padding-top = 10px, padding-right = 20px, padding-bottom = 30px, padding-left = 40px.

padding:10px 20px;

Penjelasan: Dari padding diatas, akan memberikan nilai:

  • padding top dan bottom = 10px;
  • padding left dan right = 20px;

Dengan menggunankan shorthand tentu kita bisa lebih sedikit mengetik dan membuat code css menjadi lebih simple.

Nah itulah pembahasan tentang properti padding dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang padding dalam css.

Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS