CSS Margin dan Padding

tutorial css margin dan padding

Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.

Deklarasi margin dan padding dapat dituliskan seperti ini:

  • margin:5px;
  • padding:5px;

5px adalah contoh value dari properti margin dan padding. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga dapat ditentukan dengan satuan em, pt ataupun %, meskipun sebenarnya ada juga satuan pengukuran yang lainnya. Kamu bahkan bisa menuliskan ukuran kerenggangan negatif seperti -5px, -100px, dll.

Margin dan padding dapat dipecah menjadi empat bagian seperti ini:

DeklarasiKeterangan
margin-top:5px;Menentukan margin sebelah atas sebesar 5 piksel
margin-right:5px;Menentukan margin sebelah kanan sebesar 5 piksel
margin-bottom:5px;Menentukan margin sebelah bawah sebesar 5 piksel
margin-left:5px;Menentukan margin sebelah kiri sebesar 5 piksel
padding-top:5px;Menentukan padding sebelah atas sebesar 5 piksel
padding-right:5px;Menentukan padding sebelah kanan sebesar 5 piksel
padding-bottom:5px;Menentukan padding sebelah bawah sebesar 5 piksel
padding-left:5px;Menentukan padding sebelah kiri sebesar 5 piksel

Atau kamu juga bisa menggunakan cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin/padding saja seperti ini:

DeklarasiKeterangan
margin:1px 2px 3px 4px;Margin atas: 1 piksel
Margin kanan: 2 piksel
Margin bawah: 3 piksel
Margin kiri: 4 piksel
margin:1px 2px 3px;Margin atas: 1 piksel
Margin kanan dan kiri: 2 piksel
Margin bawah: 3 piksel
margin:2px 4px;Margin vertikal (atas dan bawah): 2 piksel
Margin horizontal (kanan dan kiri): 4 piksel
padding:1px 2px 3px 4px;Padding atas: 1 piksel
Padding kanan: 2 piksel
Padding bawah: 3 piksel
Padding kiri: 4 piksel
padding:1px 2px 3px;Padding atas: 1 piksel
Padding kanan dan kiri: 2 piksel
Padding bawah: 3 piksel
padding:2px 4px;Padding vertikal (atas dan bawah): 2 piksel
Padding horizontal (kanan dan kiri): 4 piksel

6 Komentar

  • Admin

    terimak kasih infonya, tapi bingung :D

  • Andi AF Studio

    wah..wah..wah..wah.. curiga nih, wkwkwkwk.. tes ah tes ah..
    petunjuk menuju harta karun nih.. :D

  • Admin 3

    makasih gan atas penjelasannya, akhirnya saya paham juga, hehe..!!
    Sukses aja ya gan..!! :)

  • Unknown

    maaf sekali lagi kalo spam

    cuma mau ngucapin minal aidin wal faidzin mas :D

  • Unknown

    cara buat komentar kayak gini gmna y?
    hmm, butuh konsentrasi css ni :D

    sukses selalu buat masny :D

  • Taufik Nurrohman

    @Asmara Susanto: Maaf lahir batin juga ya...

Komentar telah ditutup.