Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 49 : Cara Menggunakan Property Line Height di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property margin di CSS untuk mendefinisikan ruang di sekitar elemen.
Properti CSS Margin digunakan untuk mendefinisikan ruang di sekitar elemen. Properti ini sepenuhnya transparan dan tidak memiliki warna latar belakang apa pun.
Property ini membersihkan area di sekitar elemen.
Margin top, bottom, left dan right dapat diubah secara independen menggunakan properti terpisah.
Anda juga dapat mengubah semua properti sekaligus dengan menggunakan properti shorthand margin.
Properti Margin CSS
Berikut properti CSS margin :
| Property | Deskripsi |
| margin | properti ini digunakan untuk mengatur semua properti dalam satu deklarasi. |
| margin-left | digunakan untuk mengatur margin kiri suatu elemen. |
| margin-right | digunakan untuk mengatur margin kanan suatu elemen. |
| margin-top | ini digunakan untuk mengatur margin atas suatu elemen. |
| margin-bottom | digunakan untuk mengatur margin bawah suatu elemen. |
Nilai CSS Margin
Ini adalah beberapa kemungkinan nilai untuk properti margin.
| Nilai | Deskripsi |
| auto | ini digunakan agar browser menghitung margin. |
| lenght | digunakan untuk menentukan margin pt, px, cm, dll. Nilai defaultnya adalah 0px. |
| % | igunakan untuk menentukan margin dalam satuan persen lebar elemen yang memuatnya. |
| inherit | ini digunakan untuk mewarisi margin dari elemen induk. |
Contoh Property Margin CSS
Anda dapat menentukan margin yang berbeda untuk sisi berbeda suatu elemen.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p> Paragraf ini tidak ditampilkan dengan margin tertentu. </p>
<p class="ex"> Paragraf ini ditampilkan dengan margin tertentu.</p>
</body>
</html> Property Margin: Properti Shorthand
Property shorthand CSS digunakan untuk mempersingkat kode. Property ini menentukan semua properti margin dalam satu properti.
Ada empat tipe untuk menentukan properti margin. Anda dapat menggunakan salah satunya.
- margin: 50 px 100 px 150 px 200 px;
- margin: 50 px 100 px 150 px;
- margin: 50 px 100 px;
- margin 50 px;
- Margin: 50 px 100 px 150 px 200 px;
Ini mengidentifikasi bahwa:
- Nilai margin atas adalah 50px
- Nilai margin kanan adalah 100px
- Nilai margin bawah adalah 150px
- Nilai margin kiri adalah 200px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p> Paragraf ini tidak ditampilkan dengan margin tertentu. </p>
<p class="ex"> Paragraf ini ditampilkan dengan margin tertentu.</p>
</body>
</html>
2. Margin: 50 px 100 px 150 px;
Ini mengidentifikasi bahwa:
- Nilai margin atas adalah 50px
- Nilai margin kiri dan kanan adalah 100px
- Nilai margin bawah adalah 150px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p> Paragraf ini tidak ditampilkan dengan margin tertentu. </p>
<p class="ex"> Paragraf ini ditampilkan dengan margin tertentu.</p>
</body>
</html>
3. Margin: 50 px 100 px;
Ini mengidentifikasi bahwa:
- Nilai margin atas dan bawah adalah 50px
- Nilai margin kiri dan kanan adalah 100px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px;
}
</style>
</head>
<body>
<p> Paragraf ini tidak ditampilkan dengan margin tertentu. </p>
<p class="ex"> Paragraf ini ditampilkan dengan margin tertentu.</p>
</body>
</html>
4. Margin: 50 px;
Ini mengidentifikasi bahwa:
- Nilai margin kanan atas bawah dan kiri adalah 50px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px;
}
</style>
</head>
<body>
<p> Paragraf ini tidak ditampilkan dengan margin tertentu. </p>
<p class="ex"> Paragraf ini ditampilkan dengan margin tertentu.</p>
</body>
</html>
Semoga tutorial property margin ini membantu Anda untuk memahami cara menggunakan property margin dalam mengatur ruang di sekitar elemen di website Anda.
0 Komentar