Margin CSS – Pengertian Margin dan Fungsi Margin dalam CSS

CSS Margin

Margin adalah ruang kosong di sekitar elemen HTML. Margin akan membuat ruang kosong dibagian paling luar dari box…

…Sifat margin dalam css adalah transparan dan tidak bisa dibuat warnanya.

membuat margin css
membuat margin css

Perbedaana margin dan padding adalah margin akan digunakan untuk ruang yang paling luar dari pada elemen HTML. Sementara padding untuk membuat spasi diantara konten dan border…

…Border itu masih didalam margin.

Margin CSS

Margin digunakan untuk membuat spasis antara elemen HTML, kalau tanpa margin elemen html akan menyatu antara satu dan yang lainnya.

Pembuatan nilai margin

Penentuan nilai dari margin bisa secara individu ataupun secara keseluruhan.

Jika ditentukan dengan sisi masing-masing kita bisa memakai Property berikut ini

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

Satuan nilai yang dipakai dalam properti margin bisa menggunakan px, pt, cm dll

Bisa juga memekai persen dan inherit.

Contoh margin css dengan penentuan nilai tiap sisi

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}

p.ex {
border:1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
</style>
</head>
<body>

<h2>Menggunakan Nilai Individual pada Margin:</h2>

<p>Teks ini tanpa menggunakan margins.</p>
<p class="ex">Teks ini memiliki top dan bottom margin 100px, left margin 80px, 
dan right margin 150px.</p>

</body>
</html>

Dari contoh diatas saya membuat nilai dari margin atas bawah 100px, kanan 150px, kiri 80px.

Contoh margin nilai inherit

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
border: 1px solid red;
margin-left: 100px;
}

p.one {
margin-left: inherit;
}
</style>
</head>
<body>

<h2>Menggunakan inherit Value</h2>
<p>Nilai margin kiri akan inherit dari parent element:</p>

<div class="container">
<p class="one">Ini adalah paragraf dengan nilai margin left inherit dari element div.</p>
</div>

</body>

</body>
</html>

Dalam contoh ini paragraf yang di class one inherit dari nilai margin diatas. Inherit adalah nilai turunan atau mengikuti nilai diatasnya.

Margin – Properti Shorthand

Properti shorthand adalah properti penulisan pendek, dimana dengan properti shorthand ini kita tidak perlu untuk menulis nilai margin untuk masing-masing sisi.

Misal

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

Dengan properti shorthand kita cukup menulis seperti berikut

margin: 100px 150px 100px 80px;

Contoh margin shorthand

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}

p.ex {
border:1px solid red;
margin: 100px 150px 100px 80px;
}
</style>
</head>
<body>

<h2>Menggunakan properti margin Shorthand</h2>

<p>Paragraf ini tanpa marign margins.</p>
<p class="ex">Paragraf ini memiliki top and bottom margin 100px, dan left margin 80px, 
dand right margin 150px.</p>

</body>
</html>

Pembuatan nilai shorthand

Dalam properti shorthand ini kita bisa menentukan nilainya satu, dua, dan empat sisi.

Perhatikan penentuan nilai properti shorthand berikut ini

margin: 25px 50px 75px 100px;

Artinya:

margin atas adalah 25px
Margin kanan adalah 50px
Margin bawah adalah 75px
Margin kiri adalah 100px

Jika kita menentukan nilainya hanya untuk 3 sisi saja contohnya sebagai berikut

margin: 25px 50px 75px;

Artinya:

margin atas adalah 25px
Margin kanan dan kiri 50px
Margin bawah adalah 75px

Jika kita hanya menentukan 2 sisi saja seperti berikut ini

margin: 25px 50px;

Artinya

Margin Atas dan bawah 25px
Margin kanan dan kiri 50px

Dan yang terakhir

margin: 25px;

Artinya semua sisi baik atas, kanan, bawah, kiri akan memiliki jarak 25px.

Kita juga bisa membuat nilai margin: auto dengan nilai ini maka secara otomatis box akan berada di tengah-tengah.

Contoh margin auto

<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>

<h2>Menggunakan Value auto</h2>
<p>Kita bisa memakai nilai value auto yang akan 
membuat box berada tepat ditengah-tengah:</p>

<div>
Elemen div ini menggunakan margin: auto;
</div>

</body>
</html>

Sampai disini kita sudah belajar belejar membuat margin, menentukan nilai margin, satuan nilai margin, serta perbedaan margin dan padding.

Dan sekarang kita sudah selesai mempelajari apa itu margin, semua tentang margin sudah saya bahas.

Jika ada yang masih kurang silakan ditambahkan di komentar agar bisa saya masukan ke dalam tutorial ini.

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas