Padding CSS berfungsi untuk memberikan ruangan di dalam sebuah elemen, di dalam border dari sebuah elemen. Berbeda dengan margin CSS yang memberikan ruang di luar elemen.
Margin sebuah elemen bisa diatur dengan property:
- margin-top : memberikan jarang sebelah atas di luar elemen.
- margin-bottom : memberikan jarang sebelah bawah di luar elemen.
- margin-left : memberikan jarang sebelah kiri di luar elemen.
- margin-right : memberikan jarang sebelah kanan di luar elemen.
Daftar Isi
Atau kamu bisa mengatur semua margin dengan property marginsekaligus. Mengenai margin shorthand akan kita bahas dibawah.
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 margin 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 margin 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
