Home » Accessories Blog » Fungsi Margin, Jenis Dan Contohnya

Thursday 17 January 2013

Fungsi Margin, Jenis Dan Contohnya

-Pengertian Margin

Disini kita akan membahas tentang Fungsi Margin, Jenis Dan Contohnya pada css html code. Margin adalah salah satu property yang dimiliki CSS (Cascading Style Sheet). Apa itu CSS? Silahkan klik disini tentang Pengertian CSS (Cascading Style Sheet).

-Fungsi Margin

Margin mempunyai fungsi sebagai pemberi jarak atau batas  (bagian luar) pada tag html. Perhatikan gambar dibawah ini Fungsi Margin, Jenis Dan Contohnya  :


Note: Garis warna biru adalah border

-Properti Margin

Margin mempunyai bagian - bagian atau properti antara lain :
  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left
Sedangkan nilai atau value dari margin antara lain :
  • % (percent)
  • auto
  • px (pixel)
  • Em, in dan pt
Berikut Contoh - contoh kode Margin
  • Margin-top
-contoh kode 1
margin-top; berfungsi untuk memberi jarak pada bagian atas

<html>
<head>
<title>contoh margin top css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
margin-top:60px;
}
</style>
</head>
<body>
<div id="box1">
CONTOH ISI / TEKS ANDA
</div>
<!--// selamat belajar. salam gustilubis.blogspot.com //-->
</body>
</html>
Untuk melihat hasil out put nya lihat keterangan dibawah ini Fungsi Margin, Jenis Dan Contohnya :
Keterangan :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmargintopcss.htm
  4. Close Note Pad tadi, lalu cari file yang anda simpan tadi  kemudian double klik atau buka dengan (Firefox, IE, Opera, dan sebagainya).
  • Margin-right
-contoh kode 2
margin-right; berfungsi untuk memberi jarak pada bagian kanan

<html>
<head>
<title>contoh margin right css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
margin-right:150px;
}
</style>
</head>
<body>
<div id="box1">
CONTOH ISI / CONTENT ANDA
</div>
<!--// selamat belajar. salam gustilubis.blogspot.com //-->
</body>
</html>
Untuk melihat hasil out put nya lihat keterangan dibawah ini Fungsi Margin, Jenis Dan Contohnya :
Keterangan :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmarginrightcss.htm
  4. Close Note Pad tadi, lalu cari file yang anda simpan tadi  kemudian double klik atau buka dengan (Firefox, IE, Opera, dan sebagainya).
Untuk bagian bottom (bawah) dan left (kiri) anda bisa edit sendiri tentunya.
Selain dari contoh margin diatas ada juga yang bersifat auto, maksudnya auto adalah menyesuaikan nilai value dari lebar dan tinggi jarak, perhatikan contohnya dibawah ini :
  • Margin Value Auto
contoh kode 3
margin:auto

<html>
<head>
<title>contoh margin value auto css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
width:800px;
margin-left:auto;
margin-top:30px;
margin-right:auto;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="box1">
CONTOH ISI / CONTENT ANDA
</div>
<!--// selamat belajar. salam gustilubis.blogspot.com //-->
</body>
</html>

Untuk melihat hasil out put nya lihat keterangan dibawah ini Fungsi Margin, Jenis Dan Contohnya :
Keterangan :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmarginvalueautocss.htm
  4. Close Note Pad tadi, lalu cari file yang anda simpan tadi  kemudian double klik atau buka dengan (Firefox, IE, Opera, dan sebagainya).
  • Margin Shorthand Style
Jenis style shorthand maksudnya adalah penulisan kode dapat disingkat agar kita tidak terlalu panjang menulis kode nya. Mengerti maksudnya ? Selanjutnya akan kita bahas di halaman berikut nya tentang Fungsi Margin,Jenis Dan Contohnya V.2, silahkan klik disini tentang contoh - contoh margin shorthand Style.

 Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Fungsi Margin, Jenis Dan Contohnya.
Label: Accessories Blog

4 comments: