Margin adalah salah satu kode CSS yang berfungsi untuk mengatur tata letak dari tampilan blog atau website kita, dan biasanya margin digunakan untuk merapikan sisi-sisi dari blog kita. sehingga tercipta tampilan yang rapi dan enak dipandang.
Sedangkan Padding adalah kode CSS yang berfungsi mengatur tata letak dari tulisan yang kita buat atau dengan kata lain merapikan tampilan tulisan pada artikel yang kita muat di blog atau website.
sebagai contoh : penggunaan kode Margin
Contoh : Penggunaan kode Padding
Penggunaan
Untuk Penggunaan kode margin atau padding sendiri pada dasarnya sama, namun fungsi dari kedua sangat berbeda. Kita mulai dari penulisan kode Margin.
Pada Kode Margin penulisan kerap kali berada pada stuktur kerangka blog atau website, mulai dari Header, body, sidebar dan footer. dan kode ini sendiri masuk sebagai bagian dari semua type style Code.
Sedangkan Padding adalah kode CSS yang berfungsi mengatur tata letak dari tulisan yang kita buat atau dengan kata lain merapikan tampilan tulisan pada artikel yang kita muat di blog atau website.
sebagai contoh : penggunaan kode Margin
Contoh yang tidak menggunakan margin, terlihat dimana kedua sisi menempel pada sisi dari ruang postingan.
Contoh yang telah menggunakan margin, terlihat dimana kedua sisi tidak menempel pada sisi dari ruang postingan, atau memiliki jarak.
Contoh : Penggunaan kode Padding
Contoh tulisan yang tidak menggunakan padding, terlihat dimana tulisan menempel pada sisi dari kotak yang kian buat ini, atau tidak memiliki jarak.
Contoh yang tulisan telah menggunakan padding, terlihat dimana kedua sisi tulisan tidak menempel pada sisi dari kotak yang kian buat ini, atau memiliki jarak.
Penggunaan
Untuk Penggunaan kode margin atau padding sendiri pada dasarnya sama, namun fungsi dari kedua sangat berbeda. Kita mulai dari penulisan kode Margin.
Pada Kode Margin penulisan kerap kali berada pada stuktur kerangka blog atau website, mulai dari Header, body, sidebar dan footer. dan kode ini sendiri masuk sebagai bagian dari semua type style Code.
contoh :
#Header {background : #black; margin:5px; border:1px solid blue;}
#body{background:white; border:1px solid black; margin:5px;}Dari contoh diatas k'ian menuliskan kode "margin:5px;", dengan pengertian bahwa kita mengatur jarak untuk semua sisi (atas, kanan, bawah, dan kiri) berjarak 5px (pixel). namun apabila kita ingin menentukan masing-masing sisinya, maka penulisan kodenya sebagai berikut :
#Header {background : #black; margin:5px 10px 5px 15px; border:1px solid blue;}
#body{background:white; border:1px solid black; margin:15px 5px 10px 12px;}Dari contoh diatas kembali k'ian menuliskan kode margin yang berbeda dengan penulisan kode margin pada keterangan yang pertama dimana k'ian membuat 4 buah ukuran untuk masing-masing jarak antar sisinya. "margin:5px 10px 5px 15px;" mengatur sisi atas 5px, sisi kanan 10px, sisi bawah 5px , dan sisi kiri 15px (mengikuti arah jarum jam : atas-kanan-bawah-kiri).
Penulisan kode padding sama dengan penulisan kode margin, karena keduanya juga masuk dalam type style code. dan berada pada struktur kerangka blog atau website, namun mengatur sisi tulisan yang ada di masing-masing kerangka blog.
#Header {background : #black; padding:5px 10px 5px 15px; border:1px solid blue;}
#body{background:white; border:1px solid black; padding:15px 5px 10px 12px;}
Dari contoh diatas k'ian menuliskan kode padding yang sama dengan penulisan kode margin pada keterangan yang pertama. dimana k'ian membuat 4 buah ukuran untuk masing-masing jarak antar sisi tulisannya. "padding:5px 10px 5px 15px;" mengatur sisi atas tulisan 5px, sisi kanan tulisan 10px, sisi bawah tulisan 5px , dan sisi kiri tulisan 15px (mengikuti arah jarum jam : atas-kanan-bawah-kiri).
Sangat mudah bukan..?? semoga dari apa yang k'ian tuliskan pada postingan kali ini bisa memberi manfaat bagi sobat sekalian.
beruna sekali pemaparan ini. Trims... ...Replay
@Insanitis : makasih mas, moga bermanfaat juga buat sobat-sobat yg lain..!!! thank's da comment ...Replay