Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
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 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.

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

2 Response to "Mengenal Perbedaan Margin dan Padding, serta cara penggunaanya"

  1. Insanitis Said,

    beruna sekali pemaparan ini. Trims... ...Replay

     

  2. Kian Coi Said,

    @Insanitis : makasih mas, moga bermanfaat juga buat sobat-sobat yg lain..!!! thank's da comment ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |