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