Monday, December 22, 2014

Tutorial CSS Part 12: Mengatur Margin

Margin adalah area bebas yang berada diantara beberapa elemen pada halaman html. Margin bisa juga diartikan sebagai jarak/spasi antara dua elemen atau lebih. Posisi margin berada diluar border dan merupakan area yang transparan serta tidak bisa diberi warna background.

ilustrasi margin dan padding

Cara Mengatur Margin

Untuk mengatur margin kita menggunakan properti CSS margin. NIlai dari properti margin bisa diset beberapa cara, yaitu :
  • auto, artinya browser memperkirakan sendiri nilai margin. Jika satu elemen maka akan diletakkan ditengah-tengah atau semetris antara atas, bawah, kiri dan kanan.
  • panjang, artinya memberi nilai margin dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
  • persen (%), artinya nilai margin diambil dari persentase lebar dari isi elemen.
  • inherit/pewarisan, artinya nilai margin diambil dari turunan nilai margin elemen induk.

Contoh penggunaan CSS margin :

p {    
   margin : 5px;    
} 
Cara diatas merupakan cara singkat dalam mengatur margin. Contoh diatas berarti kita menentukan margin sebesar 5px untuk tiap sisi elemen.

Mengatur margin secara individual

Cara yang telah disebutkan diatas adalah mengatur margin dengan nilai yang sama (5px) untuk setiap sisi.

Selain itu kita juga bisa mengatur nilai margin dengan nilai yang berbeda untuk setiap sisi dengan cara sebagai berikut :

Mengatur margin individual dengan penulisan singkat

Dengan cara ini kita mengatur margin secara individual tiap sisi dengan menuliskan beberapa nilai pada properti margin. Ada beberapa cara yang bisa dilakukan, perhatikan contoh berikut ini :
p {
   margin : 5px 3px 2px 4px;    
} 
Artinya kita mengatur nilai margin :
  • margin atas = 5px
  • margin kanan = 3px
  • margin bawah = 2px
  • margin kiri = 4px
p {
   margin : 5px 3px 2px;    
} 
Artinya kita mengatur nilai margin :
  • margin atas = 5px
  • margin kanan dan kiri = 3px
  • margin bawah = 2px
p {
   margin : 5px 3px;    
} 
Artinya kita mengatur nilai margin :
  • margin atas dan bawah = 5px
  • margin kanan dan kiri= 3px
Kita bisa berlatih CSS margin individual secara langsung disini >>

Mengatur margin individual dengan penulisan properti tersendiri

Selain penulisan diatas, kita bisa mengatur margin tiap sisi dengan properti tersendiri. Ada empat properti CSS yang disediakan untuk mengatur margin tiap sisi, yaitu :
  • margin-top, untuk mengatur margin sisi atas
  • margin-right, untuk mengatur margin sisi kanan
  • margin-bottom, untuk mengatur margin sisi bawah
  • margin-top, untuk mengatur margin sisi kiri

Contoh penggunaan CSS margin secara individual dengan properti :

p {    
   margin-left : 5px;    
} 
Kita bisa berlatih CSS margin individual dengan properti disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment