Perbedaan Antara Padding dan Margin pada CSS

 CSS Tutorial

perbedaan antara margin dan padding pada cssSetelah sebelumnya membahas bagaimana membuat box shadow, kini saatnya memahami perbedaan antara padding dan margin dalam CSS properties. Ini merupakan sintax yang digunakan untuk menata tampilan web agar lebih eye catching, menyatu dan sama rata.

Padding dan margin pasti sudah tidak asing lagi bagi kita yang sering meng otak-atik CSS, karena hampir setiap elemen dari #id dan .class memiliki sintax ini.

Apa perbedaan antara Padding dan Margin?

Setiap elemen dalam CSS memiliki empat sudut (baik itu persegi maupun persegi panjang). Dari elemen tersebut terdapat dua sisi yaitu,

  1. Sisi luar atau margin
    Untuk lebih jelasnya dapat dilihat pada gambar berikut. Garis hitam dianggap border.
    contoh margin CSS
  2. Sisi dalam atau padding
    Untuk lebih jelasnya dapat dilihat pada gambar berikut. Garis hitam dianggap border.
    contoh padding CSS

Bagaimana cara membuat padding dan margin dalam CSS

  1. Margin
    Ada beberapa cara yang dapat digunakan untuk membuat margin dari sebuah elemen dalam CSS. Contoh sintax yang dapat digunakan untuk membuat margin dari sebuah elemen #header seperti ini,
    cara membuat padding css

    margin: 10px 15px 10px 15px;

    Atau bisa juga seperti ini, hasil yang didapat sama dengan perintah yang diatas,

    cara membuat margin css

    margin: 10px 15px;

    Atau bisa juga seperti ini,

    margin-top:10px;
    margin-right:15px;
    margin-bottom:10px;
    margin-left:15px;

    Ketiga cara diatas menghasilkan margin yang sama, jadi untuk penggunaannya dapat anda sesuaikan dengan kebutuhan.

  2. Padding
    Untuk membuat padding dari sebuah elemen dalam CSS hampir sama dengan margin, hanya tingga mengganti kata margin dengan padding. Contoh sintax yang dapat digunakan membuat padding dari sebuah elemen #header  seperti ini,
    cara membuat margin css

    padding: 10px 15px 10px 15px;

    Atau bisa juga seperti ini, hasil yang didapat sama dengan perintah yang diatas,
    cara membuat padding css

    padding: 10px 15px;

    Atau bisa juga seperti ini,

    padding-top:10px;
    padding-right:15px;
    padding-bottom:10px;
    padding-left:15px;

    Ketiga cara diatas juga menghasilkan padding yang sama, jadi untuk penggunaannya dapat anda sesuaikan dengan kebutuhan.

Bagaimana mengenai perbedaan antara padding dan margin dalam CSS properties, apakah sudah paham atau malah semakin bingung? Jika sudah terbiasa dan sering otak-atik CSS pasti lebih mudah untuk memahaminya.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

No Responses

Leave a Reply