Belajar css seputar margin

belajar css

Kegunaan margin

Property 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 property margin dan bisa juga mengatur secara individu menentukan setiap sudut dengan property: 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 property margin individu:

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

Semua property 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

Property margin mendukung nilai negatif.

Contoh:

Editor Online
  1. p {
  2. background-color: yellow;
  3. border: 1px solid black;
  4. margin-top: 25px;
  5. margin-right: 40px;
  6. margin-bottom: 60px;
  7. margin-left: 80px;
  8. }

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 property margin dalam satu property tunggal. Untuk menggunakan margin shorthand Anda cukup menggunakan property margin. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan margin individu.

Contoh:

Editor Online
  1. div {
  2. width: 200px;
  3. height: 80px;
  4. background-color: red;
  5. }
  6. #box-satu {
  7. margin: 10px 15px 20px 25px;
  8. }
  9. #box-dua {
  10. margin: 15px 20px 25px;
  11. }
  12. #box-tiga {
  13. margin: 25px 10px;
  14. }
  15. #box-empat {
  16. margin: 50px;
  17. }

Jadi, inilah cara kerjanya:

Jika property margin memiliki empat nilai:

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

Jika property margin memiliki tiga nilai:

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

Jika property margin memiliki dua nilai:

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

Jika property margin memiliki satu nilai:

  • margin: 50px;
    • keempat sudut 50px

Margin auto

Property 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.

Contoh:

Editor Online
  1. div {
  2. border: 1px solid black;
  3. width: 250px;
  4. margin: auto;
  5. }

Margin inherit

Property 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.

Contoh:

Editor Online
  1. div {
  2. border: 1px solid blue;
  3. margin-left: 70px;
  4. }
  5. p {
  6. margin: inherit;
  7. }

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.

Contoh:

Editor Online
  1. #merah {
  2. background-color: red;
  3. width: 250px;
  4. height: 150px;
  5. margin-bottom: 30px;
  6. }
  7. #hijau {
  8. background-color: green;
  9. width: 250px;
  10. height: 150px;
  11. margin-top: 20px;
  12. }

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.

Hal ini tidak terjadi pada 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.

Contoh:

Editor Online
  1. #kuning {
  2. padding: 30px 45px;
  3. width: 200px;
  4. height: 150px;
  5. background-color: yellow;
  6. }
  7. #abu {
  8. margin: 30px 45px;
  9. width: 200px;
  10. height: 150px;
  11. background-color: grey;
  12. }

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 property margin

PropertyKegunaanya
marginMengatur semua property 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

Leave a Reply

Your email address will not be published. Required fields are marked *