The marginproperti mendefinisikan bagian terluar dari model kotak, menciptakan ruang di sekitar elemen, di luar dari setiap batas yang ditetapkan.
Margin ditetapkan menggunakan panjang, persentase, atau kata kunci autodan dapat memiliki nilai negatif. Berikut contohnya:
.box ( margin: 0 3em 0 3em; )margin adalah properti singkatan dan menerima hingga empat nilai, yang ditampilkan di sini:
.box ( margin: || || || )Jika kurang dari empat nilai ditetapkan, nilai yang hilang diasumsikan berdasarkan nilai yang ditentukan. Misalnya, dua set aturan berikut akan mendapatkan hasil yang identik:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Jadi, jika hanya satu nilai yang ditentukan, ini menetapkan keempat margin ke nilai yang sama. Jika tiga nilai dideklarasikan, itu adalah margin: (top) (left-and-right) (bottom);.
Setiap margin individu dapat dideklarasikan menggunakan longhand, dalam hal ini Anda hanya akan menentukan satu nilai per properti:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto dan keterpusatan
Setiap properti margin juga dapat menerima nilai auto. Nilai autopada dasarnya memberi tahu browser untuk menentukan margin untuk Anda. Dalam kebanyakan kasus, nilai autoakan setara dengan nilai 0(yang merupakan nilai awal untuk setiap properti margin) atau ruang apa pun yang tersedia di sisi elemen tersebut. Namun, autoberguna untuk pemusatan horizontal:
.container ( width: 980px; margin: 0 auto; )Dalam contoh ini, dua hal dilakukan untuk memusatkan elemen ini secara horizontal di dalam ruang yang tersedia:
- Elemen diberi lebar yang ditentukan
- Margin kiri dan kanan disetel ke
auto
Tanpa lebar yang ditentukan, autonilai - nilai pada dasarnya tidak akan berpengaruh, mengatur margin kiri dan kanan ke 0atau apapun ruang yang tersedia di dalam elemen induk.
Juga harus ditunjukkan bahwa autoini berguna hanya untuk pemusatan horizontal, sehingga penggunaan autountuk margin atas dan bawah tidak akan memusatkan elemen secara vertikal, yang dapat membingungkan bagi pemula.
Menciutkan margin
Margin vertikal pada elemen berbeda yang saling bersentuhan (sehingga tidak ada konten, bantalan, atau batas yang memisahkannya) akan menciut, membentuk margin tunggal yang sama dengan margin yang berdampingan lebih besar. Ini tidak terjadi pada margin horizontal (kiri dan kanan), hanya vertikal (atas dan bawah).
Sebagai ilustrasi, ambil HTML berikut:
Collapsing Margins
Example text.Dan CSS berikut:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Dalam contoh ini, h2elemen diberi margin bawah 20px. Elemen paragraf, yang langsung mengikutinya di sumber, memiliki set margin atas 10px.
Akal sehat tampaknya menyarankan bahwa ketebalan margin vertikal antara h2dan paragraf akan menjadi total 30px (20px + 10px). Tetapi karena margin collapse, ketebalan sebenarnya menjadi 20px. Ini ditunjukkan pada pena yang disematkan di bawah ini:
Meskipun margin yang menyusut mungkin tampak tidak intuitif pada pandangan pertama, sebenarnya berguna karena beberapa alasan. Pertama, mereka mencegah elemen kosong menambah ruang margin vertikal ekstra yang biasanya tidak diinginkan.
Kedua, mereka memungkinkan pendekatan yang lebih konsisten untuk mendeklarasikan margin universal di seluruh elemen halaman. Misalnya, judul biasanya memiliki spasi margin vertikal, begitu pula paragraf. Jika margin tidak menciut, judul yang mengikuti paragraf (atau sebaliknya) sering kali memerlukan pengaturan ulang margin pada salah satu elemen untuk mencapai jumlah spasi vertikal yang konsisten.
Ketiga, penciutan margin juga berlaku untuk elemen bertingkat. Lihat pulpen berikut:
Di sini, elemen paragraf memiliki margin atas yang disetel pada 30px, dan bersarang di dalam divelemen dengan margin atas 40px. Selain itu, h2elemen tersebut memiliki margin bawah 20px.
Sekali lagi, akal sehat akan menyarankan bahwa total ruang margin vertikal di sini adalah 90px (20px + 40px + 30px), tetapi semua margin diciutkan menjadi satu margin 40px (yang tertinggi dari ketiganya). Ini berguna dalam banyak kasus karena tidak perlu menentukan ulang margin atas untuk menghilangkan ruang vertikal ekstra.
Margin Negatif
Seperti yang mungkin Anda duga, sementara nilai margin positif mendorong elemen lain menjauh, margin negatif akan menarik elemen itu sendiri ke arah itu, atau menarik elemen lain ke arahnya.
Berikut adalah contoh wadah dengan bantalan, dan tajuk h2 memiliki margin negatif yang menarik dirinya melalui bantalan itu kembali ke tepi:
Lihat
Kasus Penggunaan Pena yang Paling Umum untuk Margin Negatif oleh Chris Coyier (@chriscoyier)
di CodePen.
Berikut adalah contoh di mana paragraf pertama memiliki margin bawah negatif, yang menarik paragraf berikutnya.
Lihat
Margin Negatif Pena di paragraf bawah oleh Chris Coyier (@chriscoyier)
di CodePen.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja |
IE6 rentan terhadap bug margin-mengambang yang berlipat ganda, yang dapat diatasi dalam banyak kasus dengan menambahkan display: inlineelemen mengambang.