Tutorial Belajar CSS Bagian 50 : Cara Menggunakan Property Margin di CSS

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  :

PropertyDeskripsi
marginproperti ini digunakan untuk mengatur semua properti dalam satu deklarasi.
margin-leftdigunakan untuk mengatur margin kiri suatu elemen.
margin-rightdigunakan untuk mengatur margin kanan suatu elemen.
margin-topini digunakan untuk mengatur margin atas suatu elemen.
margin-bottomdigunakan untuk mengatur margin bawah suatu elemen.

Nilai CSS Margin

Ini adalah beberapa kemungkinan nilai untuk properti margin.

NilaiDeskripsi
autoini digunakan agar browser menghitung margin.
lenghtdigunakan untuk menentukan margin pt, px, cm, dll. Nilai defaultnya adalah 0px.
%igunakan untuk menentukan margin dalam satuan persen lebar elemen yang memuatnya.
inheritini digunakan untuk mewarisi margin dari elemen induk.
Catatan: Anda juga dapat menggunakan nilai negatif untuk membuat konten menjadi tumpang tindih.

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.

  1. margin: 50 px 100 px 150 px 200 px;
  2. margin: 50 px 100 px 150 px;
  3. margin: 50 px 100 px;
  4. margin 50 px;
  1. 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.

You May Also Like

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0