Pada tutorial kali ini kita akan membahas mengenai cara mengatur margin pada CSS, mungkin buat teman – teman yang belum mengetahui apa itu margin, Margin adalah jarak terluar dari 1 objek dengan objek lainnya.
Pada CSS terdapat settingan yang digunakan untuk mengatur dari margin ini, ada beberapa teknik yang bisa anda gunakan untuk mengatur margin di CSS, baik langsung saja kita langsung coba untuk membuat contoh sederhana.
Margin pada CSS
Perhatikan skrip sederhana dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Margin</title>
<style type="text/css">
p
{
background-color: yellow;
}
.pertama
{
margin-top: 50px;
margin-left: 300px;
margin-right: 200px;
margin-bottom: 300px;
}
</style>
</head>
<body>
<p class="pertama">
Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1 || Ini adalah paragraf ke 1
</p>
<p class="kedua">
Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2 || Ini adalah paragraf ke 2
</p>
</body>
</html>lalu silahkan di simpan semisal dengan nama margin_css_1.html lalu silahkan buka di browser, maka hasilnya adalah sebagai berikut :
Penjelasannya sebagai berikut :
- terdapat 2 paragraf, yaitu paragraf pertama dan paragraf kedua, yang keduanya memiliki background warna kuning
- pada paragraf pertama kita beri beberapa set margin, untuk margin top (atas) 50 pixel, margin left (kiri) 300 pixel, margin right (kanan) 200 px, margin bottom (bawah) 300 px
Selain menggunakan satuan pixel, margin juga dapat menggunakan satuan value lain antara lain :
- auto – browser akan menghitung secara otomatis untuk ukuran marginnya, jika menggunakan auto untuk obyek akan berada ditengah secara horizontal, jika dalam 1 baris hanya terdapat 1 obyek saja
- length – bisa menggunakan ukuran dengan satuan px, pt, cm, etc.
- % – satuan persen digunakan untuk mengatur lebar margin berdasarkan presentase
- inherit – digunakan untuk mengatur ukuran yang akan meniru ukuran parent element tersebut
Margin – Shorthand Property
Jika pada contoh diatas teman – teman sudah belajar menset margin dengan menuliskan satu persatu dari bagian margin, seperti top, left, right, dan bottom, css sebenarnya telah memberikan fitur untuk membuat perintah margin dengan lebih ringkas, istilah tersebut dikenal shorthand property, jika sebelumnya anda menuliskan dengan cara seperti ini :
.pertama
{
margin-top: 50px;
margin-left: 300px;
margin-right: 200px;
margin-bottom: 300px;
}dengan menggunakan shorthand property anda dapat menuliskannya dengan cara seperti ini :
.pertama
{
margin: 50px 300px 200px 300px;
}nah terlihat untuk value dari marginnya ada 4, urutannya seperti arah jarum jam :
- Atas
- Kanan
- Bawah
- Kiri
Bagaimana mudah kan cara menset dari margin pada css, jika ada yang ingin di diskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial css selanjutnya.