Cara Menggunakan Margin Pada CSS


CSS Margins


Properti margin CSS digunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan.

Dengan CSS, Anda memiliki kendali penuh atas margin. Ada properti untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).


Margin - Individual Sides


CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left


Semua properti margin dapat memiliki nilai berikut:
  • auto - browser menghitung margin
  • length - menentukan margin dalam px, pt, cm, dll.
  • % - menentukan margin dalam% dari lebar elemen yang mengandung
  • inherit - menentukan bahwa margin harus diwarisi dari elemen induk


Kiat: Nilai negatif diizinkan.

Contoh berikut menetapkan margin yang berbeda untuk keempat sisi elemen <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}



Margin - Properti Singkat


Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.

Properti margin adalah properti singkatan untuk properti margin individual berikut:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Jadi, inilah cara kerjanya:

Jika properti margin memiliki empat nilai:

margin: 25px 50px 75px 100px;
  • margin atas adalah 25px
  • margin kanan adalah 50px
  • margin bawah adalah 75px
  • margin kiri adalah 100px

p {
  margin: 25px 50px 75px 100px;
}



Jika properti margin memiliki tiga nilai:

margin: 25px 50px 75px;
  • margin atas adalah 25px
  • margin kanan dan kiri adalah 50px
  • margin bawah adalah 75px

p {
  margin: 25px 50px 75px;
}



Jika properti margin memiliki dua nilai:

margin: 25px 50px;
  • margin atas dan bawah adalah 25px
  • margin kanan dan kiri adalah 50px

p {
  margin: 25px 50px;
}



Jika properti margin memiliki satu nilai:

margin: 25px;
  • keempat margin adalah 25px

p {
  margin: 25px;
}



auto Value


Anda dapat mengatur properti margin ke otomatis untuk memusatkan elemen secara horizontal di dalam wadahnya.

Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}



inherit Value


Contoh ini memungkinkan margin kiri elemen <p class = "ex1"> diwarisi dari elemen induk (<div>):

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}



Margin Collapse


Margin elemen atas dan bawah kadang-kadang diciutkan menjadi margin tunggal yang sama dengan yang terbesar dari dua margin.

Ini tidak terjadi di margin kiri dan kanan! Hanya margin atas dan bawah!

Lihatlah contoh berikut:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}



Pada contoh di atas, elemen <h1> memiliki margin bawah 50px dan elemen <h2> memiliki margin atas yang ditetapkan ke 20px.

Secara umum tampaknya menyarankan bahwa margin vertikal antara <h1> dan <h2> akan menjadi total 70px (50px + 20px). Tetapi karena margin collapse, margin aktual menjadi 50px.

Semua Tentang Kode CSS Margins:


Tag Description
margin Properti singkatan untuk mengatur properti margin dalam satu deklarasi
margin-bottom Mengatur margin bawah suatu elemen
margin-left Mengatur margin kiri suatu elemen
margin-right Mengatur margin kanan suatu elemen
margin-top Menetapkan margin atas suatu elemen

Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar