Assallamuallaikum Wr Wb..

cs1.png

Selamat malam sahabat blogponsel, berjumpa lagi dengan saya di malam minggu ini.

Pada kesempatan kali ini saya akan membahas tentang Pengertian Tentang Margin Dan Padding dimana pernah saya bahas di artikel sebelumnya, namun kali ini akan saya jelaskan secara lengkap dari yang pernah saya bahas di perjumpaan sebelumnya. Walaupun ini sedikit terlambat saya posting tapi tidak apa-apa daripada tidak sama sekali, langsung saja di simak di bawah ini.


Margin

Margin adalah property yang mengatur batas luar antara elemen satu dengan elemen lainnya, margin merupakan daerah ruang di sekitar konten/elemen yang akan membentuk daerah (ruang) vertikal & horizontal. Jika elemen tidak memiliki margin maka elemen tersebut akan terlihat rapat atau tidak ada celah, namun jika elemen tersebut memiliki margin maka akan terlihat tidak rapat atau memiliki celah. coba perhatikan contoh di bawah ini.

Content

Keterangan :
- Warna merah adalah margin.
- Warna biru adalah padding.
- Warna hijau adalah content.

Sebut saja kita mau mengatur elemen warna biru, ketika kita memberi nilai value margin sebesar 15px di keempat sisi maka jarak yang dihasilkan akan seperti warna merah diatas. Bisa kita lihat jika elemen memiliki margin akan terlihat memiliki celah antara elemen lainnya.

Margin dapat diatur menggunakan property shorthand (nilai value yang mewakili keempat sisi elemen) atau menggunakan style longhand, saya akan memberikan contoh penggunaan property shorthand & longhand di bawah ini.


Contoh penggunaan margin menggunakan property shorthand.

body { margin:5px; }
Maka keempat sisi elemen memiliki nilai margin yang sama.

body { margin:5px 3px; }
5px mengatur margin atas & bawah, sedangkan 3px mengatur margin kiri & kanan.

body { margin:3px 5px 7px; }
3px mengatur margin atas, 5px mengatur margin kanan & 7px mengatur margin bawah.

body { margin:3px 5px 7px 4px; }
3px mengatur margin atas, 5px mengatur margin kanan, 7px mengatur margin bawah & 4px mengatur margin kiri.


Contoh menggunakan style longhand.

body { margin-top:3px;margin-right:5px;margin-bottom:7px;margin-left:4px; }

Jika kita mau mengatur margin di satu sisi saja entah itu bagian atas, kanan, bawah atau bagian kiri. Kita dapat menulisnya seperti ini.

Saya ambil contoh bagian atas.

body { margin:2px 0px 0px 0px; }

Nilai 2px akan mengatur margin bagian atas saja, sedangkan nilai 0px akan mengatur bagian ketiga sisi lainnya.

Atau juga bisa menggunakan cara ini.

body { margin-top:2px;margin-right:0px;margin-bottom:0px;margin-left:0px; }

Cara penulisan nilai margin memiliki aturan yaitu atas, kanan, bawah & kiri. Jadi kalau kita mau memberi nilai margin di suatu elemen, maka di mulai dari atas ke kanan lalu ke bawah & ke kiri.

Margin memiliki 4 value (nilai) yang bisa menggunakan beberapa unit sebagai berikut ini.

- Length (Panjang).
Menentukan nilai margin dengan satuan px, pt, in, mm, cm & pc.
Satuan Absolute Length Units, Contoh : em, ex & ch.
Satuan Relative Length Units, Contoh : margin:3rem;.

Margin dapat juga menggunakan satuan Persentase, Contoh : margin:10%;. Margin yang diatur menggunakan persentase akan mengatur berdasarkan blok content yang ada di dalamnya.

Margin juga bisa menggunakan satuan negative value, Contoh : margin:-5px.

Margin bisa juga menggunakan satuan otomatis, Contoh : margin:0 auto;. Maka margin akan otomatis mengatur dengan sendirinya. & yang terakhir menggunakan satuan inherit, Contoh : margin:inherit.

Saya rasa pengertian margin sudah bisa dipahami, sekarang saya akan membahas tentang padding. Sebenarnya padding tidak jauh berbeda dengan margin & cara penulisannya pun sama, cuma yang membedakan adalah fungsinya saja. Jadi saya akan menjelaskan artinya saja.


Baca Juga = Cara Belajar Membuat Css Tahap Ketiga | Part 3


Padding

Padding adalah ruang vertikal & horizontal yang diatur di sekitar isi/konten, anda bisa melihat warna biru pada contoh diatas tadi. Warna biru diatas merupakan padding yang telah kita atur sesuai dengan apa yang kita rencanakan sebelumnya.

Demikian yang dapat saya sampaikan tentang Pengertian Margin Dan Padding, saya mohon maaf jika penyampaiannya sulit dimengerti.

Wassallamuallaikum Wr Wb..