Belajar Kode CSS & Desain Blog: CSS Margin Properties

Properti css "margin" pada intinya berfungsi sebagai pengatur jarak sebuah box/kotak dalam desain web/blog dengan elemen lainnya agar sebuah blog/web dapat tertata dengan baik. Properti margin merupakan unsur terluar box setelah border, padding dan content. Nilai/value margin dapat menggunakan prosentase, auto, inherit, atau satuan lain dalam bentuk pixel (px), pt dan em. Secara umum satuan yang paling sering digunakan adalah pixel. Margin bersifat melingkupi sebuah box sehingga pengaturan margin dapat dilakukan dari 4 (empat) sisi berbeda.

margin-top : untuk mengatur jarak dengan unsur lain disebelah atas.
margin-right : untuk mengatur jarak dengan unsur lain disebelah kanan.
margin-bottom : untuk mengatur jarak dengan unsur lain disebelah bawah.
margin-left : untuk mengatur jarak dengan unsur lain disebelah kiri.

Penulisan kode-1

margin-top:A-px
margin-right:B-px
margin-bottom:C-px
margin-left:D-px

Bisa dituliskan dalam bentuk:

margin:A-px B-px C-px D-px;
margin:top right bottom left;

Penulisan kode-2

margin:A-px auto;
top=A-px, bottom=A-px, left=auto, right=auto

Penulisan kode-3

margin:A-px auto B-px;
top=A-px, bottom=B-px, left=auto, right=auto

Penulisan kode-4

margin:A-px;
top=A-px, bottom=A-px, left=A-px, right=A-px

Penulisan kode-6

margin:A-px B-px;
top=A-px, bottom=A-px, left=B-px, right=B-px

Penulisan kode-7

margin:A-px B-px C-px;
top=A-px, bottom=C-px, left=B-px, right=B-px

Penulisan kode-8

margin:A-px B-px C-px D-px;
top=A-px, bottom=C-px, left=D-px, right=B-px

DIV center of position

Tiga macam penulisan kode yang dapat digunakan:

margin:A-px auto;
margin:A-px auto B-px;
margin-left:auto;margin-right;auto;

Image center of position

Tiga macam penulisan kode yang dapat digunakan:

margin:A-px auto;display:block;
margin:A-px auto B-px;display:block;
margin:A-px auto;display:block;text-align:center;

Di bawah telah disertakan beberapa box dengan berbagai cara penulisan dan ukuran margin. Lakukan beberapa perubahan termasuk penggunaan satuan selain pixel (px) untuk melihat perbedaan dan agar makin memperjelas fungsi dan kegunaan margin.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>|CSS Margin Properties</title>
<head>  
<style type="text/css"> 
body{margin:0 auto;padding:0;margin:0;font-family:Arial;font-size:16px;color:#000;}
b{font-weight:bold;font-size:16px;color:yellow;}
span{color:red;}
pre{line-height:18px;white-space:pre;margin:10px 0 0 0px;text-align:left;margin-left:50px;}div.boks-7 pre{ position:absolute;top:20px;left:50px;color:red;}


div{
      text-align:center;
      line-height:24px;
      color:#fff;
      text-shadow:1px 1px 1px #000;
}
div{
      width:400px;
      height:200px;
      border:2px solid red;
      background:blue;
}
div.boks-A{
      margin:20px;
}
div.boks-1{
      margin:20px;
}
div.boks-2{
      margin:20px 100px 50px;
}
div.boks-3{
      margin:20px auto;
}
div.boks-4{
      margin:20px auto 5px;
}
div.boks-4{
      margin:20px auto 5px;
}
div.boks-5{
      margin:5px 0 20px 250px;
}
div.boks-6{
      margin-top:10px;
      margin-right:30px;
      margin-bottom:15px;
      margin-left:100px;
}
div.boks-7{
      position:relative;
      margin:20px auto;
      background:lightgreen; 
}
div.boks-7 img{
      width:150px;
      height:150px;
      margin:10px auto;
      display:block;
}
</style>
</head>
<body>

<div class="boks-A">
<br/><b>box dengan kode lengkap</b>
<pre><b>div</b>{
    width:400px;
    height:200px;
    border:2px solid red;
    background:blue;
    margin:<span>xxx</span>;
}</pre>
</div>


<div class="boks-1">
<br/><b>margin:20px;</b><br/><br/>top=20px<br/>right=20px<br/>bottom=20px<br/>left=20px
</div>

<div class="boks-2">
<br/><b>margin:20px 100px 50px;</b><br/><br/>top=20px<br/>right=100px<br/>bottom=50px<br/>left=100px
</div>

<div class="boks-3">
<br/><b>margin:20px auto;</b><br/>Center of position<br/>top=20px<br/>left=auto<br/>right=auto<br/>bottom=20px
</div>

<div class="boks-4">
<br/><b>margin:20px auto 5px;</b><br/>Center of position<br/>top=20px<br/>left=auto<br/>right=auto<br/>bottom=5px
</div>

<div class="boks-5">
<br/><b>margin:5px 0 5px 250px;</b><br/><br/>top=5px<br/>right=0<br/>bottom=5px<br/>left=250px
</div>

<div class="boks-6"><br/>
<br/>margin-top:10px;<br/> margin-right:30px;<br/>margin-bottom:15px;<br/>margin-left:100px;
</div>

<div class="boks-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYRtxrQ_nRfOzxbdwjRgOCNM7Kr8Zv8CfCmdQlxCd8HOJFyz7N6_bkSFelZeodUd9jIyRlUNgqoN0GK6NVnBLcmYWaen3SKowlbZxeFObokunO6AkNpa1YBkJOWj1b4CA-uHzjdiCeOs/" /><b>Image center of position</b>
<pre>img{
    display:block;
    margin:10px auto;
    width:150px;
    height:150px;
}</pre>
</div>
           
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS Margin Properties

Penulisan kode-1

Bisa dituliskan dalam bentuk:

Penulisan kode-2

Penulisan kode-3

Penulisan kode-4

Penulisan kode-6

Penulisan kode-7

Penulisan kode-8

DIV center of position

Image center of position

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.15.2012');

CSS Margin Properties

Penulisan kode-1

Bisa dituliskan dalam bentuk:

Penulisan kode-2

Penulisan kode-3

Penulisan kode-4

Penulisan kode-6

Penulisan kode-7

Penulisan kode-8

DIV center of position

Image center of position

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e