Cara Menggunakan Margin Pada CSS

Pada tutorial kali ini kita akan membahas mengenai cara menggunakan margin pada CSS.

Sebelumnya kita telah membahas mengenai border yang digunakan sebagai pembatas elemen.

Apa Pengertian Margin CSS ?

Margin merupakan properti pada CSS yang digunakan untuk memberikan spasi disekitar elemen.

Properti margin akan mengatur ukuran spasi luar dari border.

Menggunakan CSS, anda bisa mengontrol penuh margin, dan untuk properti margin bisa diatur untuk tiap sisi (atas, kanan, bawah dan kiri).

Bagaimana Penulisan Margin pada CSS…?

Untuk menulis margin kita bisa mencantumkan kode properti pada setiap sisi dari sebuah element.

Untuk margin sendiri menjadi bagian atas, kanan, bawah dan kiri seperti dibawah ini.

margin-top
margon-right
margin-bottom
margin-left

Semua properti dari margin dapat mempunyai nilai:
*auto –> browser akan menghitung nilai margin berdasar ukuran layar
*jarak –> margin dapat dikategorikan dalam px, pt, cm dll.
*% –> margin dikategorikan dalam ukuran % dari lebar element
*inherit –> ukuran margin seharusnya diwariskan dari element parent

Penggunaan tanda negatif bisa digunakan untuk margin CSS.

Contoh Kode:

<!DOCTYPE html>
<html>
    <head>
    <style>
    div {
        border: 1px solid blue;
        margin-top: 150px;
        margin-bottom: 120px;
        margin-right: 90px;
        margin-left: 130px;
        background-color: #999;
    }
    </style>
    </head>
    <body>
    <h3>Contoh Penggunakan Properti Individual Margin</h3>
    <div>
    Elemen div ini mempunyai margin atas 150px, margin bawah 120px, margin kanan 90px, dan margin kiri 130px.
    </div>
    </body>
<html>

Output Kode:

Bagaimana Cara Singkat Menulis Margin?

Pada CSS kita bisa menyingkat penulisan kode dari properti cara menggunakan margin dalam satu properti saja. Urutan dari penulisan singkat properti margin berurutan menjadi:
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

Contoh Kode:

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 1px solid #999;
        margin: 80px 100px 90px 70px;
        background-color: #999;
    }
</style>
</head>
<body>
    <h1>Contoh Singkat Penulisan Margin</h1>
    <div>
    .....
    </div>
</body>
</html>

Output Kode:

Properti mempunyai empat nilai:
margin : 30px 50px 40px 100px;
– margin atas 30px
– margin kanan 50px
– margin bawah 40px
– margin kiri 100px

Properti mempunyai tiga nilai:
margin: 10px 40px 20px;
– margin atas adalah 10px
– margin kanan dan kiri adalah 40px
– margin bawah adalah 20px

Properti margin mempunyai dua nilai:
margin: 25px 30px;
– margin atas dan bawah adalah 25px
– margin kiri dan kanan adalah 30px

Properti margin mempunyai satu nilai:
margin: 30px;
– semua nilai dari margin menjadi 30px.

Menggunakan Nilai “auto” pada Margin
Anda bisa mengatur properti dari margin menjadi auto ke horizontal tengah elemen dengan container.
Pada bagian elemen, lebar akan menjadi spesifik dan spasi akan dibagi sama diantara kiri dan kanan dari margin.

Contoh Kode:

<!DOCTYPE html>
<html>
<head>
	<style>
	div {
		width: 250px;
		margin: auto;
		border: 1px solid blue;
		}
        </style>
	</head>
    <body>
    <h1>Contoh Penggunaan Nilai "auto"</h1>
    <p>Ini sebuah teks.....</p>
    <div>Elemen div ini terletak di tengah karena mempunyai <strong>margin: auto;</strong>
    </div>
    </body>
</html>

Output Kode:

Pada output kode tersebut menghasilkan margin pada bagian kiri dan kanan sama. Ketika ukuran diperbesar dan diperkecil maka konten akan berada di bagian tengah.

Mengunakan Nilai “inherit” pada Margin
Penggunaan “inherit” akan membuat pewarisan oleh elemen parent.

Contoh Kode:

<!DOCTYPE html>
<html>
    <head>
      <style>
	div.coba {
	   border: 1px solid blue;
	   margin-right: 100px;
	}
	
	p.satu {
		margin-right: inherit;
	}
	</style>
	</head>
<body>
   <h1>Contoh Penggunaan nilai "inherit"</h1>
   <p>Kita lihat hasilnya...</p>
   <div class="coba">
    <p class="satu">Paragraf ini menggunakan pewarisan / inherit dari elemen parent div</p>
    </div>	
</body>
</html>

Output Kode:

Demikian tutorial belajar CSS mengenai cara menggunakan margin untuk desain layout website.

Selanjutnya kita akan membahas mengenai cara menggunakan padding pada CSS.

Semoga tutorial ini bermanfaat dan terima kasih.