Home » Accessories Blog » Fungsi Margin, Jenis Dan Contohnya V.2

Thursday 17 January 2013

Fungsi Margin, Jenis Dan Contohnya V.2

Sebelumnya kita sudah membahas tentang Fungsi Margin, Jenis Dan Contohnya di bagian pertama. Silahkan klik disini untuk membacanya dan juga penjelasannya serta contohnya.

-Fungsi Margin

Margin mempunyai fungsi sebagai pemberi jarak atau batas  (bagian luar) pada tag html.

-Properti Margin
  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left
Disini kita hanya akan membahas jenis margin dengan type shorthand, untuk penjelasan tentang properti margin diatas silahkan klik disini Fungsi Margin, Jenis Dan Contohnya.
  • Margin Shorthand

Shorthand adalah penulisan kode secara singkat.
Berikut aturan dalam kode css nya :
  • margin:value1;...... ini sama juga dengan margin-top:value1;margin-right:value1; margin-bottom:value1; margin-left:value1; ( memiliki nilai yang sama) 
  • margin:value1 value2;..... ini sama juga dengan margin-top:value1; margin-bottom:value1, dan margin-right:value2; margin-left:value2;
  • margin:value1 value2 value3;..... ini sama juga dengan margin-top:value1; margin-right:value2;margin-left:value2; margin-bottom:value3;
  • margin:value1 value2 value3 value4;..... ini sama juga dengan margin-top:value1; margin-right:value2; margin-bottom:value3;margin-left:value4;
Berikut contoh kode nya :
  • Margin value 1
contoh: kita ingin mengisi nilai value 1 = 100px, maka nilai value 1 tersebut adalah :

margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;

-contoh kode 4
margin-shorthand;value 1

<html>
<head>
<title>contoh margin shorthand value1 css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
margin:100px;
}
</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 V.2 :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmarginshorthandvalue1css.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 value 1, value 2
contoh: kita ingin mengisi nilai value 1 = 100px, value 2 = 200px, maka nilai value tersebut  adalah :

margin-top:100px;
margin-right:200px;
margin-bottom:100px;
margin-left:200px;

-contoh kode 5
margin-shorthand; value 1,2

<html>
<head>
<title>contoh margin shorthand value1 value2 css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
margin:100px 200px;
}
</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 V.2 :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmarginshorthandvalue1value2css.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 value 1, value 2, value 3
contoh: kita ingin mengisi nilai value 1 = 100px, value 2 = 200px, value 3 = 300px maka nilai value tersebut  adalah :

margin-top:100px;
margin-right:200px;
margin-bottom:300px;
margin-left:200px;

-contoh kode 6
margin-shorthand; value 1,2,3

<html>
<head>
<title>contoh margin shorthand value1,2,3 css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
margin:100px 200px 300px;
}
</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 V.2 :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmarginshorthandvalue1,2,3css.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 value 1, value 2, value 3, value 4
contoh: kita ingin mengisi nilai value 1 = 100px, value 2 = 200px, value 3 = 300px, value 4 = 400px maka nilai value tersebut  adalah :

margin-top:100px;
margin-right:200px;
margin-bottom:300px;
margin-left:400px;

contoh kode 7
margin-shorthand; value 1,2,3,4

<html>
<head>
<title>contoh margin shorthand value1,2,3,4 css</title>
<style type="text/css">
body {
background-color:green;
}
#box1{
background-color:red;
height:800px;
margin:100px 200px 300px 400px;
}
</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 V.2 :
  1. Copy kode diatas
  2. Paste kan ke Note Pad
  3. Save as (pilih all types) , simpan dengan nama contohmarginshorthandvalue1,2,3,4css.htm
  4. Close Note Pad tadi, lalu cari file yang anda simpan tadi  kemudian double klik atau buka dengan (Firefox, IE, Opera, dan sebagainya).
Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Fungsi Margin, Jenis Dan Contohnya V.2 .
Label: Accessories Blog

No comments:

Post a Comment