Fungsi dan kegunaan margin pada CSS

Margin pada CSS digunakan untuk memberikan ruang space diluar elemen. Dalam web design margin mempuny

Fungsi margin

Properti margin sendiri hampir mirip kegunaannya dengan padding. Margin pada CSS digunakan untuk memberikan ruang space diluar elemen, bukan didalam elemen. Dalam web design margin mempunyai peranan penting dalam mengatur jarak pada setiap elemen atau layout.

Margin bisa mengatur untuk semua sudut sekaligus dengan properti margin dan bisa juga mengatur secara individu menentukan setiap sudut dengan properti: margin-top, margin-right, margin-bottom dan margin-left.

Margin individu

Anda bisa mengatur jarak yang lebih spesifik atau mendetail dengan menggunakan istilah margin individu. Yang dimaksud dengan margin individu sendiri, Anda bisa mengatur menentukan setiap sudut untuk memberikan jarak. Berikut list properti margin individu:

  • margin-top ( atas )
  • margin-right ( kanan )
  • margin-bottom ( bawah )
  • margin-left ( kiri )

Semua properti margin dapat memiliki nilai berikut:

  • Auto – browser menghitung margin secara otomatis berdasarkan ruang yang tersisa di dalam wadah
  • Length – ukuran margin ditentukan dalam satuan seperti px, pt, cm, dll.
  • % – menentukan margin sebagai persentase memungkinkannya untuk beradaptasi ketika ukuran layar berubah
  • Inherit – menetapkan bahwa margin harus diwarisi dari elemen induknya
Informasi: properti margin mendukung nilai negatif.
p {
    background-color: yellow;
    border: 1px solid black;
    margin-top: 25px;
    margin-right: 40px;
    margin-bottom: 60px;
    margin-left: 80px;
}

Margin shorthand

Dengan margin shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti margin dalam satu properti tunggal.

Untuk menggunakan margin shorthand Anda cukup menggunakan properti margin. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan margin individu.

div {
    width: 200px;
    height: 80px;
    background-color: red;
}
#box-satu {
    margin: 10px 15px 20px 25px;
}
#box-dua {
    margin: 15px 20px 25px;
}
#box-tiga {
    margin: 25px 10px;
}
#box-empat {
    margin: 50px;
}

Jadi, inilah cara kerjanya:

Jika properti margin memiliki empat nilai:

  • margin: 10px 15px 20px 25px;
    • margin atas 10px
    • margin kanan 15px
    • margin bawah 20px
    • margin kiri 25px

Jika properti margin memiliki tiga nilai:

  • margin: 15px 20px 25px;
    • margin atas 15px
    • margin kanan dan kiri 20px
    • margin bawah 25px

Jika properti margin memiliki dua nilai:

  • margin: 25px 10px;
    • margin atas dan bawah 25px
    • margin kanan dan kiri 10px

Jika properti margin memiliki satu nilai:

  • margin: 50px;
    • keempat sudut 50px

Margin auto

Properti margin dapat memiliki nilai auto atau otomatis. Dalam hal ini, sebuah elemen menyesuaikan untuk mengambil ruang yang dibutuhkan dan ruang yang tersisa dibagi menjadi dua margin yang sama. Ini sangat berguna jika Anda ingin sebuah elemen otomatis rata kanan dan kiri secara horizontal. Agar berfungsi jangan lupa memberikan width pada elemen.

div {
    border: 1px solid black;
    width: 250px;
    margin: auto;
}

Margin inherit

Properti margin dapat memiliki nilai inherit. Dalam hal ini, sebuah nilai inherit mendefinisikan sebuah pewarisan. Dengan cara ini Anda bisa menggunakan nilai inherit untuk menentukan agar nilai mewarisi dari elemen induknya.

div {
    border: 1px solid blue;
    margin-left: 70px;
}
p {
    margin: inherit;
}

Margin collapse

Margin collapse atau margin runtuh bisa terjadi jika suatu elemen bersentuhan seperti: margin-bottom pada elemen yang pertama dan margin-top pada elemen yang kedua saling besentuhan atau tarik menarik.

Nahh ini disebut dengan istilah margin collapse. Saat margin collapse terjadi maka margin yang dihasilkan bukan penambahan margin-bottom dengan margin-top. Tetapi margin dengan nilai paling “besar” yang akan digunakan.

#merah {
    background-color: red;
    width: 250px;
    height: 150px;
    margin-bottom: 30px;
}
#hijau {
    background-color: green;
    width: 250px;
    height: 150px;
    margin-top: 20px;
}

Perhatikan contoh diatas !!!

Box berwarna merah memiliki margin-bawah (margin-bottom) 30px, Sedangkan box berwarna hijau memiliki margin-atas (margin-top) 20px. Kedua elemen tersebut saling bersentuhan atau tarik menarik.

Seharusnya menghasilkan margin sebesar 50px. Dari margin-bottom 30px ditambah margin-top 20px. Tetapi kenyataannya adalah collapse dan menghasilkan margin 30px saja yang diambil dari elemen yang memiliki nilai “terbesar”. Disinilah letak dan pengertian dari margin collapse tersebut.

Informasi: margin collapse hanya berlaku untuk margin atas dan bawah, tidak berlaku untuk margin kiri dan kanan.

Perbedaan margin dan padding

Margin dan padding sebenarnya mempunyai kegunaan yang sama, Jika margin digunakan untuk memberi jarak diluar elemen sedangkan padding digunakan untuk memberikan jarak didalam elemen atau konten. Agar tidak bingung mari kita praktekan langsung dan lihat perbedaan keduanya.

#kuning {
    padding: 30px 45px;
    width: 200px;
    height: 150px;
    background-color: yellow;
}
#abu {
    margin: 30px 45px;
    width: 200px;
    height: 150px;
    background-color: grey;
}

Jika Anda perhatikan box yang berwarna kuning yang memberikan jarak tulisan, itu semua fungsi dari padding. Berbeda dengan box berwarna abu-abu yang berguna memberikan jarak diluar konten atau elemen.

Daftar properti margin

PropertiKegunaanya
marginMengatur semua properti margin dalam satu deklarasi
margin-topMengatur jarak margin bagian atas
margin-rightMengatur jarak margin bagian kanan
margin-bottomMengatur jarak margin bagian bawah
margin-leftMengatur jarak margin bagian kiri