Margin CSS
Margin digunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan.
Margin CSS
Properti CSS margindigunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan.
Dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Margin - Sisi Individu
CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen:
margin-topmargin-rightmargin-bottommargin-left
Semua properti margin dapat memiliki nilai berikut:
- otomatis - browser menghitung margin
- panjang - menentukan margin dalam px, pt, cm, dll.
- % - menentukan margin dalam % dari lebar elemen yang mengandung
- mewarisi - menentukan bahwa margin harus diwarisi dari elemen induk
Tip: Nilai negatif diperbolehkan.
Contoh
Tetapkan margin yang berbeda untuk keempat sisi elemen <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Properti Singkatan
Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.
Properti marginadalah properti singkatan untuk properti margin individu berikut:
margin-topmargin-rightmargin-bottommargin-left
Jadi, inilah cara kerjanya:
Jika marginproperti memiliki empat nilai:
- margin: 25px 50px 75px 100px;
- margin atas adalah 25px
- margin kanan adalah 50px
- margin bawah adalah 75px
- margin kiri adalah 100px
Contoh
Gunakan properti singkatan margin dengan empat nilai:
p {
margin: 25px 50px 75px 100px;
}
Jika marginproperti memiliki tiga nilai:
- margin: 25px 50px 75px;
- margin atas adalah 25px
- margin kanan dan kiri adalah 50px
- margin bawah adalah 75px
Contoh
Gunakan properti singkatan margin dengan tiga nilai:
p {
margin: 25px 50px 75px;
}
Jika marginproperti memiliki dua nilai:
- margin: 25px 50px;
- margin atas dan bawah adalah 25px
- margin kanan dan kiri adalah 50px
Contoh
Gunakan properti singkatan margin dengan dua nilai:
p {
margin: 25px 50px;
}
Jika marginproperti memiliki satu nilai:
- margin: 25 piksel;
- keempat margin adalah 25px
Contoh
Gunakan properti singkatan margin dengan satu nilai:
p {
margin: 25px;
}
Nilai otomatis
Anda dapat mengatur properti margin ke autountuk 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.
Contoh
Gunakan margin: otomatis:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Nilai yang diwarisi
Contoh ini memungkinkan margin kiri elemen <p class="ex1"> diwarisi dari elemen induk (<div>):
Contoh
Penggunaan nilai warisan:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}