Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen. Berbeda dengan padding CSS yang memberikan ruang di sebelah dalam elemen.
Margin sebuah elemen bisa diatur dengan property:
- margin-top : memberikan jarang sebelah atas di dalam elemen.
- margin-bottom : memberikan jarang sebelah bawah di dalam elemen.
- margin-left : memberikan jarang sebelah kiri di dalam elemen.
- margin-right : memberikan jarang sebelah kanan di dalam elemen.
Daftar Isi
Atau kami bisa mengatur semua padding dengan property margin
sekaligus.
Adapun value dalam margin
bisa berupa:
- pixel: contohnya 100px
- %: contohnya 10%
- inherit
Margin Shorthand
Seperti yang kita bahas diatas, kamu bisa memanggil margin dengan shorthand tanpa harus memanggil satu persatu padding property.
Susunannya:
margin:top_value right_value buttom_value left_value;
atau
margin:y_axis_value x_axis_value;
Kurang mengerti? Liat contohnya ya.
margin:10px 20px 30px 40px;
Penjelasan: Dari margin diatas, akan memberikan nilai margin-top = 10px, margin-right = 20px, margin-bottom = 30px, margin-left = 40px.
margin:10px 20px;
Penjelasan: Dari padding diatas, akan memberikan nilai:
- margin top dan bottom = 10px;
- margin left dan right = 20px;
Dengan menggunankan shorthand tentu kita bisa lebih sedikit mengetik dan membuat code css menjadi lebih simple.
Nah itulah pembahasan tentang properti margin dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang margin dalam css.
Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS