Dalam tutorial kali ini kita membahas tentang box model dalam css, salah satunya yaitu margin. yaitu lapisan terakhir dalam sebuah konsep Box model CSS

Pengertian Margin di CSS

Margin juga merupakan spasi atau ruang kosong di dalam Box Model. Bedanya, margin berada di luar konten yang kita gunakan, margin di gunakan untuk membatasi antar element. bisa dilihat gambar di bawah ini posisi margin berada di bagian paling luar Model box.

Properti margin dalam CSS untuk setiap sisi elemen:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Semua properti margin dapat memiliki nilai-nilai berikut:

  • auto – browser menghitung margin
  • length – menentukan margin dalam px, pt, cm, dll.
  • % – menentukan margin dalam% dari lebar elemen yang mengandung
  • mewarisi – menetapkan bahwa margin harus diwarisi dari elemen induk

dalam penulisan margin di css ada 2 cara yang berbeda yaitu :

Margin – Individual Sides

Margin – Individual Sides dengan menuliskan jumlah setiap properti margin, mulai dari top, bottom, right, dan left contohnya seperti berikut ini :

Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat menghapus property margin-bottom dan perhatikan perbedaannya.

selain menggunakan px untuk menentukan nilai dari setiap properti css, anda juga bisa menggunakan % (persen) untuk menentukan setiap propertinya seperti contoh di bawah ini :

Terlihat perbedaannya dalam penggunaan %(persen) , jarak akan otomatis berubah mengikuti berapa besar halaman dari webnya, untuk melihat perbedaannya anda bisa memperkecil browser atau inspect elemen.

Margin – Shorthand Property

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.

ka marginproperti memiliki empat nilai:

  • margin: 25px 50px 75px 100px;
    • margin atas adalah 25px
    • margin kanan adalah 50px
    • margin bawah adalah 75px
    • margin kiri adalah 100px

bisa dilihat di code diatas penggunaan Shorthand Property akan mempersingkat codingan yang kita buat.

begitulah pengguaan margin dalam css, di tutorial selanjutnya kita akan bertemu dalam tutorial penggunaan padding di css. salam coder.