CSS :Â Properties Untuk Mengatur Margin
Margin digunakan untuk mengatur jarak antara border dengan elemen lain.
Ada beberapa format penulisan property margin  yang bisa digunakan yaitu
- format penulisan margin dengan 4 value :
margin : valueT valueR valueB valueL;
keterangan :
valueT : untuk mengatur jarak margin top (bagian atas)
valueR : untuk mengatur jarak margin right (bagian kanan)
valueB : untuk mengatur jarak margin bottom (bagian bawah)
valueL : untuk mengatur jarak margin left (bagian kiri)
- format penulisan margin dengan 3 value :
margin : valueTÂ valueRLÂ valueB ;
keterangan :
valueT Â Â Â Â Â Â Â Â Â Â Â : untuk mengatur jarak margin top (bagian atas)
valueRLÂ Â Â Â Â Â Â Â Â :untuk mengatur jarak margin right (bagian kanan) dan Left (bagian kiri)
valueB : untuk mengatur jarak margin bottom (bagian bawah)
- format penulisan margin dengan 2 value :
margin : valueTB Â valueLRÂ ;
keterangan :
valueTBÂ Â Â Â Â Â Â Â Â : untuk mengatur jarak margin top (bagian atas) dan bottom (bagian bawah)
valueLRÂ Â Â Â Â Â Â Â Â : untuk mengatur jarak margin left (bagian kiri) dan right (bagian kanan)
- format penulisan margin dengan 1 value :
margin : value ;
keterangan :
format penulisan margin dengan 1 value ,artinya value (top,right,bottom,left) sudah ditentukan nilainya(value).
format penulisan margin secara detail (individu) :
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;
keterangan :
margin-top                : untuk mengatur jarak margin top(bagian atas).
margin-right            : untuk mengatur jarak margin right(bagian kanan).
margin-bottom         : untuk mengatur jarak margin bottom(bagian bawah).
margin-left                : untuk mengatur jarak margin left(bagian kiri).
untuk memberian value-nya bisa menggunakan length/panjang angka dalam (px, em, in, cm), persentage (%) atau keyword (auto).
contoh
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html> <head> <title>CSS : margin</title> </head> <style type="text/css"> body{ padding: 0; margin: 0; } div.a{ background-color: blue; width: 200px; height: 50px; } div.b{ margin: 20px; background-color: blue; width: 200px; height: 50px; } div.c{ margin: 20px 40px; background-color: blue; width: 200px; height: 50px; } div.d{ margin: 20px 40px 50px; background-color: blue; width: 200px; height: 50px; } div.e{ margin: 20px 40px 50px 60px; background-color: blue; width: 200px; height: 50px; } div.f{ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; background-color: blue; width: 200px; height: 50px; } div.g{ margin: auto; background-color: blue; width: 200px; height: 50px; } </style> <body> <div class="a">class a</div> <div class="b">class b</div> <div class="c">class c</div> <div class="d">class d</div> <div class="e">class e</div> <div class="f">class f</div> <div class="g">class f</div> </body> </html> |
