Knowing About Margin And Padding

Margin dengan Padding, fungsi & gunanya

         Dalam tulisan gw kali ini sob, kita akan belajar apa itu fungsi margin dengan padding? Memang kedua fungsi tersebut terlihat hampir sama sob, tapi keduanya berbeda, dan dibawah ini akan di jelaskan fungsi dari margin dan padding tersebut.

Margin

         Seperti yang kita ketahui bersama sob, 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. Pada susunan layout dan template akan terlihat jelas disana.

         Inilah contoh kode margin, lihat dibawah ini:

body {

Margin-top : 15px ;

Margin-rigth : 5px;

Margin-bottom : 0px;

Margin-left : 5px;

}

urutan dari margin adalah atas, kanan, bawah dan kiri, atau memang bagi para pengguna css pemula harus sering berlatih untuk memahaminya.

         Berikut ini adalah contoh jika margin diatas digabung menjadi satu seperti yang akan kita jumpai dalam berbagai template blog:

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

Dari value diatas kita dapat menyingkatnya atau memadatkannya lagi seperti ini:

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

Padding

         Memang fungsi padding dan margin terkesan sama namun fungsi padding ini sendiri yaitu bahwa padding mengatur seleksi batas jarak pada bagian dalam (lihat gambar di atas)

        Ini adalah kode dari Padding, lihat dibawah ini:

body {Padding-top : 15px ;

Padding-rigth : 5px;

Padding-bottom : 15px;

Padding-left : 5px;

}

         Kita dapat menemukan penggabungan dan pemadatan template seperti ini:

Padding : 25px 5px 25px 5px

Value diatas dapat di singkat kembali seperti ini:

Padding : 25px 5px;

         Inilah fungsi dan kegunaan dari pada Margin dan Padding sob, kalian harus mencobanya agar lebih mengerti dan memahaminya. Selamat berexperimen..cek it dot….