Assalamualaikum wr wb
A. Pengertian
      Margin adalah salah satu property CSS yang berfungsi untuk memberi jarak atau batas luar pada setiap sisi. Sedangkan Padding adalah satu dari beberapa property dalam CSS, yang berfungsi memberi jarak atau batas (bagian dalam) pada suatu tag/box/bidang html.

B. Latar Belakang
      Untuk mangatur sebuuah layout sebuah web kadang kita membutuhkan margin dan padding untuk menngaturnya.

C. Alat dan Bahan
  • Text Editor 
  • Web browser
D. Maksud & Tujuan
    Mempelajari dan memahami fungsi dari margin dan padding.

 E. Pembahasan

  •     Margin
Untuk mengatur margin kita bisa memberi nilai dari margin atas, kanan, bawah, kiri dapat diubah secara independen menggunakan property terpisah. Atau bisa juga menggunakan property yang mengaur margin ke empat sisi sekaligus.
Berikut adalah contoh kode css untuk penentuan margin pada element body.

body {
       margin-top: 100px;
       margin-right: 40px;
       margin-right: 10px;
       margin-right: 70px;
    }

Atau paling sering kita lihat model singkatnya ( shortand ) seperti ini:


body {
       margin: 100px 20px 10px 70px;
    }

  • Padding
hampir sama dengan fungsi margin untuk memberi property padding sama dengan kita memberi property pada margin hanya saja margin dan paddin memiliki fungsi yang berbeda
Contoh kode CSS untuk padding :


padding-top: 25px;
padding-right: 50px;
padding-right: 25px;
padding-right: 50px;

Model singkatnya (shrotend) seperti ini :

padding: 25px 50px;

F. Refrensi

Wassalmualaikum wr wb.

TAGS : |