Tutorial CSS : Membuat Margin CSS

By Admin
CSS
27 Jul 2022

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

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Styling Text CSS

Bagaimana cara styling text dengan css. Styling text dalam css termasuk bagaimana cara memberikan warna pada text, text docaration, text transform dan lainnya.
Admin
5 min read

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Admin
5 min read

Tutorial CSS : Membuat Padding CSS

Padding CSS berfungsi untuk memberikan ruangan di dalam sebuah elemen, di dalam border dari sebuah elemen.
Admin
5 min read

© 2024