Apa itu padding dan margin pada css?

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

Diperbaharui: 04 March 2021

Kegunaan margin pada CSS

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

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;
}

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;
}

CopyLighting

Editor Online

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;
}

CopyLighting

Editor Online

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;
}

CopyLighting

Editor Online

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;
}

CopyLighting

Editor Online

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;
}

CopyLighting

Editor Online

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;
}

CopyLighting

Editor Online

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.

Apa itu padding di CSS?

Apa Fungsi margin di HTML?

Apa itu padding bottom?

Apa itu Box sizing di CSS?