Sebenarnya margin tidak hanya digunakan untuk para desainer web, tetapi
juga untuk programmer. Khususnya Web Developers.
Pada artikel ini, kita akan mempelajari apa itu margin, bagaimana cara
penulisan nya, dan juga hal yang berkaitan dengan Margin pada CSS.
Sebelum lanjut lagi, bagi kalian yang belum membaca dan mempelajari artikel
CSS sebelumnya, dapat melihat dan membaca nya terlebih dahulu. Agar runtut
dan lebih mudah lagi belajar kedepannya.
Baca Juga ->
Belajar Properti Border Pada CSS
Jika sudah, sekarang kita mulai saja pembahasan dan pembelajaran Margin
pada CSS.
Pengertian Apa itu Margin
Margin merupakan ruang kosong yang berada di dalam Box Model.
Margin digunakan untuk membuat ruang di sekitar elemen. Melalui CSS, kita
dapat memiliki kuasa penuh untuk mengatur margin nya / jarak elemen.
Kalian dapat mengatur sisi-sisi elemen. Yaitu, atas (top), kanan(right), bawah(bottom), dan kiri(left).
Hampir sama dengan Padding yang mana berfungsi untuk membatasi jarak
elemen. Namun, ada perbedaan di antara kedua nya ( Padding dan Margin
).
Perbedaan Margin dengan Padding
Perbedaan nya yaitu :
Padding memiliki fungsi untuk mengatur jarak yang berada di dalam
elemen.
Sedangkan Margin berfungsi untuk mengatur jarak antar elemen satu dengan
elemen yang lain ( di luar ).
Lebih jelas nya, kalian dapat melihat gambar di bawah ini.
Kehadiran margin sangat penting dalam suatu halaman web, aplikasi, dan lain
sebagainya.
Tanpa Margin, setiap elemen akan saling menempel atau
berdempetan.
Contohnya seperti pada gambar di bawah ini.
Tentu tidak enak di pandang bukan? tidak ada jarak atau saling berdempetan.
Oleh karena itu, untuk memberikan jarak antar elemen nya diperlukan adanya
Margin / pengaturan margin.
Cara Penulisan Margin CSS
Terdapat 4 properti yang dimiliki oleh Margin, yaitu :
- margin-top
- margin-right
- margin-bottom
- margin-left
Penjelasan :
- Margin-top digunakan untuk mengatur jarak bagian atas antar elemen.
- Margin-right digunakan untuk mengatur jarak bagian kanan antar elemen.
- Margin-bottom digunakan untuk mengatur jarak bagian bawah antar elemen.
- Margin-left digunakan untuk mengatur jarak bagian kiri antar elemen.
Contoh penulisan sederhana properti margin.
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}Untuk lebih jelasnya, mari kita lihat seperti apa dan bagaimana penulisan margin pada HTML
Contoh.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
width: 500px;
height: 100px;
border: 5px solid yellow;
background-color: blue;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
Cara Penulisan Shorthand ( Kode Singkat ) Pada Margin
Sama halnya dengan properti CSS lainnya, pada margin kita juga dapat
menggunakan cara penulisan singkat atau Shorthand.
Lebih jelas nya kita lihat contoh di bawah ini.
p {
margin: 25px 50px 75px 100px;
}- margin-top: 25px;
- margin-right: 50px;
- margin-bottom: 75px;
- margin-left: 100px;
Lebih mudah dan singkat bukan?
Supaya lebih jelas dan paham lagi, kita coba lihat cara penggunaanya.
Contoh.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS Margin</title>
<style>
div {
width: 500px;
height: 100px;
border: 5px solid black;
background-color: blue;
margin: 20px 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
Mungkin cukup sekian artikel mengenai Tutorial Belajar Margin pada CSS. Dikarenakan terlalu panjang nya pembahasan mengenai materi ini, maka pada artikel selanjutnya kita akan lanjutkan lagi bagian kedua nya.
Sampai jumpa pada bagian kedua dari materi ini. Terima kasih dan mohon maaf apabila terdapat kesalahan dalam penulisan.
Posting Komentar
Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih