Mengatur Padding dengan CSS

Properti Padding, adalah berfungsi untuk mengatur jarak antara border dengan content pada sebuah elemen HTML.
Padding pada css sangat penting gunanya dalam hal membuat halaman website, maka dari itu saya menyarankan agar anda benar-benar memperhatikan sintak css ini.

Cara penulisan properti padding, hampir sama dengan cara penulisan properti margin, yaitu:

1.

div#sidebox {padding:10px;}

maksud dari code diatas adalah menunjukan bahwa ke empat sisi dari selector sidebox bejarak 10 pixel antara border dan content.

2.

div#sidebox {padding:10px 20px;}

maksud dari code diatas adalah menunjukan bahwa jarak antara border dan content pada sebelah atas dan bawah dari selector sidebox adalah 10 pixel sedangkan pada sebelah kiri dan kanan berjarak 20 pixel.

3.

div#sidebox {padding:10px 20px 30px 40px;}

atau bisa juga dengan cara seperti dibawah ini:

div#sidebox {padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;}

maksud dari code diatas adalah menunjukan bahwa jarak antara border dan content dari selector sidebox pada sebelah atas 10 pixel, kanan 20 pixel, bawah 30 pixel, dan kiri  adalah 40 pixel.

4.

div#sidebox {padding-top:10px;}

maksud dari code diatas adalah menunjukan bahwa border dan content dari selector sidebox pada sebelah atas adalah 10 pixel, sedangkan batas yang lainnya bernilai Default. Dan selain padding-top, juga bisa dengan properti padding-right, padding-bottom dan padding-left.

Selain dengan satuan px (pixel) juga bisa dengan satuan emphasis (em) atau persentase (%), seperti contoh:

div#sidebox {padding:1em 2%;}

Hasilnya ?…
anda bisa melakukan eksperimen sendiri kemudian test pada browser anda. dengan cara demikian akan membuat permainan anda semakin menantang.

4 tanggapan untuk “Mengatur Padding dengan CSS

  1. Oentoe Balas

    makasih infonya Mas, saya lebih senang mengecek padding dan margin template pake add-ons firefox (firebug)…
    btw lam kenal yo 😀

    • Gusdwi PenulisBalas

      Ya betul, bukan hanya itu saja… dengan Firebug, kita mampu mengedit css template site kita dengan cepat dan sangat mudah.
      Lam Kenal Balik…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *