Tutorial Belajar Margin pada CSS

Belajar Margin pada CSS

Bagi kalian yang sedang atau ingin menjadi desainer web, kalian berada pada di tempat yang tepat. Karena pada kesempatan kali ini, kita akan belajar mengenai Margin pada CSS.

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.


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.

Tutorial Belajar Margin pada CSS

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.

Tutorial Belajar Margin pada CSS

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 :
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
Penjelasan :

  1. Margin-top digunakan untuk mengatur jarak bagian atas antar elemen.
  2. Margin-right digunakan untuk mengatur jarak bagian kanan antar elemen.
  3. Margin-bottom digunakan untuk mengatur jarak bagian bawah antar elemen.
  4. 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>

Hasil dari penulisan diatas :

Tutorial Belajar Margin pada CSS

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;
}

Penulisan singkat / shorthand diatas sama artinya dengan :

  • 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>

Hasil dari penulisan diatas seperti pada gambar berikut.

Tutorial Belajar Margin pada CSS

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.

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment (0)

Lebih baru Lebih lama

ads

ads