CSS fungsi Property Margin serta Valuenya

margin adalah satu dari beberapa property dalam css, sedangkan fungsi margin adalah pemberian jarak atau batas(bagian luar) pada suatu tag/box/bidang html

Kurangnya loyalitas dalam hal apa pun seringkali menjadi salah satu penyebabutama kegagalan pada perjalanan hidup kita. Napoleon Hill

margin adalah satu dari beberapa property dalam css, sedangkan fungsi margin adalah pemberian jarak atau batas(bagian luar) pada suatu tag/box/bidang html

Last Modif at July 10th, 2011

margin adalah satu dari beberapa property dalam css, sedangkan fungsi margin adalah pemberian jarak atau batas(bagian luar) pada suatu tag/box/bidang html.

fungsi css margin menurut w3scholl adalah

  • mendefinisikan ruang disekitar element

fungsi css margin menurut buku yang saya baca adalah

  • pemberian jarak antara atau batas antara suatu objek dengan objek-objek yang berada di luar objek tersebut

fungsi margin menurut saya adalah

  • pemberian jarak(style) bagian luar pada suatu tag html

terserah mau pilih mana, yang terpenting adalah kita sama-sama ngerti fungsi margin

property margin antara lain

berikut property margin;

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin(khusus shorthand)

sedangkan value dari margin adalah

value margin

  • auto
  • angka(pangjang) dalam px(pixel)
  • %
  • em, in dan pt
  • yang paling sering saya gunakan hanya auto, px dan %

contoh margin dalam internal style

berikut beberapa kode dan tampilan tag html menggunakan style margin

margin-top

margin-top fungsinya untuk memberikan jarak dalam bagian atas

contoh kode

<html>
<head>
<title>margin top css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:900px;
margin-top:60px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama cssmargintop.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

margin-right

margin-top fungsinya untuk memberikan jarak dalam bagian kanan
contoh kode

<html>
<head>
<title>margin righ css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:900px;
margin-right:200px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama cssmarginright.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

margin-bottom

margin-top fungsinya untuk memberikan jarak dalam bagian bawah
contoh kode

<html>
<head>
<title>margin bottom css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:900px;
margin-bottom:400px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama cssmarginbottom.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

margin-left

margin-top fungsinya untuk memberikan jarak dalam bagian kiri
contoh kode

<html>
<head>
<title>margin left css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:900px;
margin-left:600px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama cssmarginleft.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

kita bisa menulis beberapa margin tapi ngga boleh ada property yang sama didalam 1 tag, id maupun class

contoh kode

<html>
<head>
<title>margin css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:900px;
margin-left:400px;
margin-top:100px;
margin-right:40px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama belajarcssmargin.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

margin value(auto)

untuk value margin juga dapat diisi dengan auto dimana value auto ini sama dengan menyesuaikan

contoh kode

<html>
<head>
<title>margin value auto css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:700px;
width:700px;
margin-left:auto;
margin-top:30px;
margin-right:auto;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama belajarcssmarginauto.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

shorthand margin

shorthand adalah teknik penulisan style css secara singkat. property margin ini juga support dengan teknik shorthand. penulisan margin dengan shorthand contohnya seperti ini

margin:value;
margin: value1 value2;
margin:value1 value2 value3;
margin:value1 value2 value3 value4
/*setiap value dipisahkan dengan spasi*/
/*kita hanya bisa menambahkan 1 property margin untuk setiap id, class maupun tag*/

jadi dalam teknik shorthand kita tidak lagi mengenal margin-right, margin-left, margin-bottom, margin-top karena property top, right, bottom dan left sudah diwakili dengan margin

adapaun aturanya, seperti ini

  • margin:value1;/*ini sama dengan margin-top:value1; margin-right:value1; margin-bottom:value1; margin-left:value1; memiliki nilai sama */
  • margin:value1 valaue2;/* ini sama dengan margin-top:value1; margin-bottom:value1, dan margin-right:value2; margin-left:value2; */
  • margin:value1 valaue2 valaue3;/* ini sama dengan margin-top:value1; margin-right:value2;margin-left:value2; margin-bottom:value3;*/
  • margin:value1 valaue2 valaue3 value4;/*ini sama dengan margin-top:value1; margin-right:value2; margin-bottom:value3;margin-left:value4;*/

dari pada bingung lihat contoh dibawah!

margin:value1;

misal kita mengisi value1=10px, maka sama dengan

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

contoh code

<html>
<head>
<title>margin css</title>
<style type="text/css">
body {
background-color:black;
}
#kotak1{
background-color:red;
height:700px;
margin:10px;
}
</style>
</head>
<body>
<div id="kotak1">
isi atau content
</div>
<!--// salam www.indaam.net //-->
</body>
</html>

tampilan

  • untuk melihat hasilnya
  • copy code/markup style diatas
  • buka notepad
  • paste
  • save as(all types)
  • dengan nama cssmarginshorthand1.html
  • lalu jalankan(double click)
  • atau open with(firefox, ie, opera dll)

margin: value1 value2;

    misal value1=10px dan value2=20px, maka sama dengan

    margin-top:10px;
    margin-right:20px;
    margin-bottom:10px;
    margin-left:20px;

    contoh code

    <html>
    <head>
    <title>margin shorthand css</title>
    <style type="text/css">
    body {
    background-color:black;
    }
    #kotak1{
    background-color:red;
    height:700px;
    margin:10px 20px;
    }
    </style>
    </head>
    <body>
    <div id="kotak1">
    isi atau content
    </div>
    <!--// salam www.indaam.net //-->
    </body>
    </html>

    tampilan

    • untuk melihat hasilnya
    • copy code/markup style diatas
    • buka notepad
    • paste
    • save as(all types)
    • dengan nama cssmarginshorthand2.html
    • lalu jalankan(double click)
    • atau open with(firefox, ie, opera dll)

    margin: value1 value2 value3;

    misal value1=10px, value2=20px dan value3=30px, maka sama dengan

    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:20px;

    contoh code

    <html>
    <head>
    <title>margin shorthand css</title>
    <style type="text/css">
    body {
    background-color:black;
    }
    #kotak1{
    background-color:red;
    height:700px;
    margin:10px 20px 30px;
    }
    </style>
    </head>
    <body>
    <div id="kotak1">
    isi atau content
    </div>
    <!--// salam www.indaam.net //-->
    </body>
    </html>

    tampilan

    • untuk melihat hasilnya
    • copy code/markup style diatas
    • buka notepad
    • paste
    • save as(all types)
    • dengan nama cssmarginshorthand3.html
    • lalu jalankan(double click)
    • atau open with(firefox, ie, opera dll)

    margin: value1 value2 value3 value4;

    misal value1=10px, value2=20px, value3=30px dan value4, maka sama dengan

    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;

    contoh code

    <html>
    <head>
    <title>margin shorthand css</title>
    <style type="text/css">
    body {
    background-color:black;
    }
    #kotak1{
    background-color:red;
    height:700px;
    margin:10px 20px 30px 40px;
    }
    </style>
    </head>
    <body>
    <div id="kotak1">
    isi atau content
    </div>
    <!--// salam www.indaam.net //-->
    </body>
    </html>

    tampilan

    • untuk melihat hasilnya
    • copy code/markup style diatas
    • buka notepad
    • paste
    • save as(all types)
    • dengan nama cssmarginshorthand4.html
    • lalu jalankan(double click)
    • atau open with(firefox, ie, opera dll)

    margin kompleks

    untuk contoh lain penggunaan property margin, perhatikan style dibawah

    <html>
    <head>
    <title>contoh margin css</title>
    <style type="text/css">
    body {
    background-color:black;
    }
    #kotak1{
    background-color:red;
    height:900px;
    width:200px;
    margin-top:40px;
    padding: 0;
    float:left;
    }
    #kotak2{
    background-color:lime;
    height:900px;
    width:200px;
    margin-right:50px;
    padding: 0;
    float:left;
    }
    #kotak3{
    background-color:yellow;
    height:900px;
    width:200px;
    margin-bottom:70px;
    padding: 0;
    float:left;
    }
    #kotak4{
    background-color:blue;
    height:900px;
    width:200px;
    margin-left:90px;
    padding: 0;
    float:left;
    }
    #kotak-bawah1{
    background-color:red;
    height:700px;
    margin-left:auto;
    margin-top:30px;
    margin-right:auto;
    margin-bottom:20px;
    clear:both;
    }
    #kotak-bawah2{
    background-color:red;
    height:700px;
    margin-left:20px;
    margin-top:30px;
    margin-right:40px;
    margin-bottom:20px;
    clear:both;
    }
    #kotak-bawah3{
    background-color:red;
    height:700px;
    margin:50px 70px;
    clear:both;
    }
    #kotak-bawah4{
    background-color:red;
    height:700px;
    width:700px;
    margin:20px auto;
    clear:both;
    }
    #kotak-bawah5{
    background-color:red;
    height:700px;
    margin:10px auto 40px -20px;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div id="kotak1">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak2">
    </div>
    <div id="kotak3">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak4">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak-bawah1">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak-bawah2">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak-bawah3">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak-bawah4">
    </div>
    <!-- salam www.indaam.net -->
    <div id="kotak-bawah5">
    </div>
    </body>
    </html>

    untuk melihat hasilnya

    • copy markup style diatas
    • paste ke notepad
    • save as (pilih all types) dengan nama contohmargincss.htm
    • jalankan(double click), atau
    • open with (firefox, ie, opera, safari, chrome)
    • silakan edit valuenya
    • letak valuenya antara : (titik dua) dan ;(titik koma)
    • selamat belajar

    khusus valuenya, saya lebih sering menggunakan auto, px atau % sedangkan pt, em ngga pernah
    semoga bermafaat

    Indam

    A geek, frontend developer. Like you, coding & experiment.
    #web #design #ui #ux #standard #dreamer
    #welding #interisti #beer #coffee

    3 thoughts on “CSS fungsi Property Margin serta Valuenya”

    1. duber says:

      thanks share tag kodingnya, sangat membantu. regards

      Anti Rayap

    2. difa says:

      makasih ya mas, mau belajar coding nih :)

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    Disclaimer, FAQ & License

    Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

    Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

    Quote

    Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

    +
    -