Margin - Trik CSS

Isi kandungan:

Anonim

The marginharta mentakrifkan bahagian paling luar model kotak, mewujudkan ruang di sekitar unsur, di luar mana-mana sempadan ditakrifkan.

Margin ditetapkan menggunakan panjang, peratusan, atau kata kunci autodan boleh mempunyai nilai negatif. Inilah contohnya:

.box ( margin: 0 3em 0 3em; )

margin adalah harta tanah dan menerima hingga empat nilai, ditunjukkan di sini:

.box ( margin: || || || )

Sekiranya kurang dari empat nilai ditetapkan, nilai yang hilang diasumsikan berdasarkan nilai yang ditentukan. Sebagai contoh, dua set peraturan berikut akan mendapat hasil yang serupa:

.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )

Oleh itu, jika hanya satu nilai yang ditentukan, ini menetapkan keempat-empat margin ke nilai yang sama. Sekiranya tiga nilai dinyatakan, itu adalah margin: (top) (left-and-right) (bottom);.

Mana-mana margin individu boleh dinyatakan menggunakan longhand, dalam hal ini anda akan menentukan hanya satu nilai per harta tanah:

.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )

auto dan berpusat

Setiap sifat margin juga dapat menerima nilai auto. Nilai autopada dasarnya memberitahu penyemak imbas untuk menentukan margin untuk anda. Dalam kebanyakan kes, nilai autoakan sama dengan nilai 0(yang merupakan nilai awal untuk setiap harta margin) atau ruang apa pun yang ada di sisi elemen tersebut. Walau bagaimanapun, autoberguna untuk pemusatan mendatar:

.container ( width: 980px; margin: 0 auto; )

Dalam contoh ini, dua perkara dilakukan untuk memusatkan elemen ini secara mendatar dalam ruang yang ada:

  • Elemen diberi lebar yang ditentukan
  • Margin kiri dan kanan ditetapkan ke auto

Tanpa lebar yang ditentukan, autonilainya pada dasarnya tidak akan berpengaruh, menetapkan margin kiri dan kanan ke 0atau apa sahaja ruang yang ada di dalam elemen induk.

Perlu juga dinyatakan bahawa autohanya berguna untuk pemusatan mendatar, dan dengan itu menggunakan automargin atas dan bawah tidak akan memusatkan elemen secara menegak, yang dapat membingungkan para pemula.

Margin runtuh

Margin menegak pada elemen yang berbeza yang saling bersentuhan (dengan itu tidak mempunyai isi, padding, atau sempadan yang memisahkannya) akan runtuh, membentuk satu margin yang sama dengan margin yang lebih besar. Ini tidak berlaku pada margin mendatar (kiri dan kanan), hanya menegak (atas dan bawah).

Untuk menggambarkan, 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 20 piksel. Elemen perenggan, yang segera mengikutinya di sumber, mempunyai margin atas ditetapkan pada 10px.

Akal sepertinya menunjukkan bahawa ketebalan margin menegak antara h2dan paragraf adalah 30px (20px + 10px). Tetapi kerana kejatuhan margin, ketebalan sebenar akhirnya menjadi 20 piksel. Ini ditunjukkan dalam pena di bawah:

Lihat Pen ini!

Walaupun margin runtuh mungkin kelihatan tidak intuitif pada pandangan pertama, mereka sebenarnya berguna kerana beberapa sebab. Pertama, mereka menghalang elemen kosong daripada menambahkan ruang margin menegak tambahan, biasanya tidak diingini.

Kedua, mereka membenarkan pendekatan yang lebih konsisten untuk menyatakan margin universal di seluruh elemen halaman. Sebagai contoh, tajuk biasanya mempunyai ruang margin menegak, dan begitu juga perenggan. Sekiranya margin tidak runtuh, tajuk yang mengikuti perenggan (atau sebaliknya) sering kali memerlukan pengaturan semula margin pada salah satu elemen untuk mencapai jarak jarak menegak yang konsisten.

Ketiga, kejatuhan margin juga berlaku untuk elemen bersarang. Lihat pena berikut:

Lihat Pen ini!

Di sini, elemen perenggan mempunyai margin atas yang ditetapkan pada 30 piksel, dan bersarang di dalam divelemen dengan margin atas 40 piksel. Di samping itu, h2elemen tersebut mempunyai margin bawah 20 piksel.

Sekali lagi, akal sehat menunjukkan bahawa jumlah ruang margin menegak di sini adalah 90px (20px + 40px + 30px), tetapi sebaliknya semua margin runtuh menjadi margin 40px tunggal (tertinggi dari ketiga). Ini berguna dalam kebanyakan kes kerana tidak perlu mentakrifkan semula salah satu margin atas untuk menghilangkan ruang menegak tambahan.

Margin Negatif

Seperti yang anda sangka, sementara nilai margin positif menolak elemen lain, margin negatif akan menarik elemen itu sendiri ke arah itu, atau menarik elemen lain ke arahnya.

Berikut adalah contoh bekas dengan padding, dan header h2 mempunyai margin negatif yang menarik dirinya melalui padding itu kembali ke tepi:

Lihat Pen
Kes Penggunaan Paling Umum untuk Margin Negatif oleh Chris Coyier (@chriscoyier)
di CodePen.

Inilah contoh di mana perenggan pertama mempunyai margin bawah negatif, yang menarik perenggan berikutnya ke atas.

Lihat Pen
Negatif Margin menarik perenggan bawah oleh Chris Coyier (@chriscoyier)
di CodePen.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi

IE6 rentan terhadap bug float-margin yang berlipat ganda, yang dapat diselesaikan dalam banyak keadaan dengan menambahkan display: inlineelemen terapung.