Fungsi "margin" pada Gambar dan Photo

Margin umumnya dituliskan dalam nilai pixel atau px (atau biasa juga pakai em --> 1em berkisar 18px) dengan nilai dari minus (-) , 0(nol) dan +(plus). Tanda yang disertakan hanya ketika kita menggunakan nilai minus (-). Besarannya terserah kita mau pakai berapa. Untuk pemakaian nilai nol (0) , kadang-kadang nilai pixelnya juga tidak disertakan, sehingga ditulis nol (0) begitu saja.

Margin di gunakan di semua sisi ruang (ada 4 sisi). Dalam penerapannya bisa digunakan secara bersama-sama ataupun terpisah.

- Contoh :

1. Apabila di gunakan secara bersamaan (terpadu) :
Contoh: margin : 5px 6px -8px 12px; ---> urutannya: top, right, bottom, left.

2. Margin atas=bawah (margin-top=margin-bottom), margin-left=margin-right dan mempunyai fungsi membuat DIV berada ditengah-tengah.

Contoh-1: margin : 0px auto; ---> top: 0px; bottom: 0px; kanan dan kiri (left and right) akan sama jaraknya (margin auto berfungsi untuk membuat sebuah DIV berada di posisi tengah antara batas sisi kanan dan kiri --> center).

Contoh-2: margin : 10px auto; --> margin-top: 10px; margin-bottom: 10px; margin-kanan dan margin-kiri (margin-left and margin-right) sama dan membuat DIV berposisi ditengah-tengah (atau lebih dikenal dengan posisi center).

3. Margin atas-bawah (top-bottom) dan kanan-kiri (left-right) sama besarnya:
Contoh: margin: 25px 55px;
- margin-top: 25px; margin-bottom: 25px; margin-left: 55px; dan margin-right: 55px;

4. Margin Kanan-Kiri sama sedang atas bawah berbeda :
Contoh: margin: 21px 9px 22px;
- margin-top: 21px; margin-left: 9px; margin-right: 9px; dan margin-bottom: 22px;

5. Margin top, right, bottom dan left berbeda :
Contoh: margin: 17px 16px 22px 29px;
- margin-top: 17px;
- margin-right: 16px;
- margin-bottom: 22px;
- margin-left: 29px;

6. Contoh hasil penempatan gambarnya :

Apabila anda ingin mencoba diruang posting blogspot. Anda bisa Copy-Paste KODE yang digunakan untuk bagan/fungsi penataan gambar di atas seperti di bawah ini:

<div style="-moz-border-radius: 12px 12px 12px 12px; background: none repeat scroll 0% 0% rgb(170, 170, 170); border: 3px solid rgb(255, 140, 0); height: 300px; margin: 20px auto; width: 340px;">
<img src="http://www.fondos-gratis.net/wallpapers/2010/01/Wallpaper-3D-003.jpg" style="border: 2px solid blue; display: block; float: left; height: 83px; margin: 10px 20px; width: 110px;" />
<img src="http://img.wallpaperstock.net:81/fantasy-girl---ghost-wallpapers_14943_1900x1200.jpg" style="border: 2px solid pink; height: 83px; margin: -40px 185px; width: 110px;" />
<img src="http://free.desktopwallpaper.org/3_chess-wallpaper-3d-03-392846.jpeg" style="border: 2px solid green; height: 83px; margin: 60px 290px 15px 50px; width: 110px;" /></div>

Tentu saja untuk penataan ini masih harus dipadukan dengan KODE yang lain, misalnya float: left, float:right, align:center, border untuk menghias gambar dan juga besaran gambar serta beberapa yang lain. Setidaknya mengetahui sedikit tentang margin ini, akan membuat kita mempunyai semangat untuk mecoba menguak rahasia penggunaan margin disaat-saat ada waktu senggang.

Catatan : Coba buka posting sebelumnya (Merubah Posisi Gambar dan Photo Posting), penggunaan margin dan kode yang lain juga berbeda tergantung kebutuhan dalam posting gambar. Contoh sederhana pada penggunaan posisi gambar di sebelah kiri, tengah atau kanan serta posisi yang tidak ditentukan.

Semoga membantu dan memberi manfaat bagi sobat BloGgeR yang suka othak-athik gambar dan photo!