Perbedaan dari fungsi margin dengan padding

Seperti yang sering sekali kita melihat dari sekian banyak kode yang ada pada kode script CSS, sering kita menemukan kedua kode tersebut. Dan sedikit penjelasan dari fungsi margin dengan padding, bahwa kedua fungsi tersebut sebenarnya hampir sama walaupun keduanya berbeda, dan dibawah ini akan di jelaskan fungsi dari margin dan padding tersebut.
Perbedaan margin dengan padding
Dan fungsi dari margin dengan padding dapat saya simpulkan seperti gambar di atas
Margin

Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.

Contoh pengkodean dari margin tersebut seperti dibawah ini
body {
Margin-top : 10px ;
Margin-rigth : 5px;
Margin-bottom : 0px;
Margin-left : 5px;
}

yang menjadi patokan dari fungsi ini adalah dimulai dari atas, kanan, bawah dan kiri, atau bila berdasarkan talar kita adalah searah dengan jarum jam.
Dari keterangan dari pengkodean margin di atas, dapat di gabungkan menjadi

Margin : 10px 5px 0px 5px; /*atas 5, kanan 5, bawah 0, kiri 10*/
Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini
Margin : 10px 5px 0px; /*atas 5, kanan 0, bawah 5, kiri 0*/

Seperti yang saya katakan diatas yang telah saya singgung mengenai Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini, ini menandakah bahwa value kanan 5px mengisi kekosongan value yang berada dibagian kiri. Jadi yang dapat saya simpulkan adalah bila kita menggunakan metode seperti ini maka margin tidak lagi mengikuti dengan arah jarum jam melainkan dari atas kebagian bawa, dan dari kanan kebagian kiri

Padding

Seperti yang telah saya terangkan di atas bahwa fungsi margin dengan padding sebenarnya hampir sama walaupun keduanya berbeda, dan yang membuat berbeda dari fungsi padding ini yaitu fungsi padding mengatur seleksi batas jarak pada bagian dalam (lihat gambar)

Contoh pengkodean dari Padding tersebut seperti dibawah ini
body {Padding-top : 15px ;
Padding-rigth : 5px;
Padding-bottom : 15px;
Padding-left : 5px;
}

Dari keterangan pengkodean dari Padding di atas, dapat di gabungkan menjadi
Padding : 15px 5px 15px 5px
atau bila value seperti ini dapat di singkat kembali seperti ini
Padding : 15px 5px;


Silahkan di praktekkan kembali untuk mengetahui lebih jauh tentang fungsi dari kedua fungsi margin dan padding ini.

Terkait dengan ini

5 komentar:

  1. Komen pertama sob,

    menambah pengetahuan bahasa css ini..

    trima kasih yaaa uda berbagi
    :D

    BalasHapus
  2. mantap gan :)
    di tunggu kunbalnya gan .
    http://didiefasolasidoo.blogspot.com/

    BalasHapus
    Balasan
    1. bisanya cuma nyari backlink doang kau didie hahak

      Hapus
  3. Gan bagian ini gk salahkah?

    Margin : 10px 5px 0px 5px; /*atas 5, kanan 5, bawah 0, kiri 10*/

    Apa gk sprti ini?

    Margin : 10px 5px 0px 5px; /*atas 10, kanan 5, bawah 0, kiri 5*/

    _--------------------------------_
    Sekedar sharing...
    http://dizashared.blogspot.com

    BalasHapus
  4. Thanks ilmunya mas, saya lupa-lupa terus memahami margin dan padding ini

    kunjungan balik ya teman-teman => www.agenresmiforedi.net

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML