CSS Margin dan Cara Menggunakan CSS Margin

Kalian pernah membuat dokumen menggunakan Microsoft Word, kemudian menentukan margin? saya yakin kalian sudah pernah melakukannya. Apa itu margin? jika di microsoft word margin adalah jarak antara tepi pengetikan dengan tepi halaman kertas. Ya intinya margin adalah ruang di diluar batas konten.

Dalam bidang desain web (web design) penggunaan margin ini sering kita gunakan untuk mengatur jarak antara elemen HTML satu dengan elemen HTML lainnya. Nah, kali ini kita akan mempelajari bagaimana menggunakan CSS untuk mengatur margin dalam desain web.

Properti CSS margin digunakan untuk membuat ruang di sekitar elemen HTML, di luar batas yang ditentukan. Dengan CSS, kalian memiliki kendali penuh untuk menentukan margin. Ada properti hyang digunakan untuk mengatur margin pada setiap sisi elemen (atas, kanan, bawah, dan kiri).

Berikut ini properti CSS untuk menentukan margin pada setiap sisi elemen:

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left

Masing-masing properti di atas dapat diberi nilai:

  • auto – ¬†browser akan menghitung margin secara otomatis.
  • length – menentukan margin dalam px, pt, cm, dll.
  • % – menentukan margin dalam satuan % dari lebar elemen diluarnya.
  • inherit – menentukan bahwa margin harus diwarisi dari elemen induk.

Oh iya, CSS Margin juga mengizinkan nilai Negatif.

Cara Menggunakan CSS Margin

Untuk cara penggunaanya silahkan perhatikan dan praktekkan contoh kode HTML dan CSS di bawah ini:

Adapun hasil penerapan CSS Margin pada contoh di atas, jika dijalankan pada web browser akan terlihat seperti pada gambar di bawah ini:

Hasil Penerapan CSS Margin

Hasil Penerapan CSS Margin

 

Menggunakan Margin – Shorthand Property (Properti Singkat)

Cara penulisan CSS Margin dapat dipersingkat dengan menggunakan format berikut:

Contoh dari contoh sebelumnya :

Dapat dipersingkat penulisannya menjadi:

Dengan cara tersebut akan menghasilkan tampilan yang sama. Silahkan kalian akan menggunakan cara yang mana yang menurut kalian paling efektif.

 

Baik mungkin sampai disini dulu tutorial CSS Margin dan Cara Penggunaannya ini, jika ada pertanyaan langsung isi kolom komentar di bawah postingan ini ya.

 

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *