Apakah keruntuhan margin? Dalam keadaan apa ia muncul? Bagaimana untuk menyelesaikannya?

Artikel ini akan membawa anda memahami model kotak CSS dan memperkenalkan apakah keruntuhan margin? Dalam keadaan apakah keruntuhan margin berlaku? Dan bercakap tentang penyelesaian.

Dalam CSS, semua elemen dikelilingi oleh "kotak" Kami secara meluas menggunakan dua jenis "kotak" - kotak peringkat blok (block box) dan kotak sebaris ( inline box).

Apakah model kotak CSS?

Dalam CSS, model kotak digunakan semasa reka bentuk dan reka letak.

Takrifan model kotak boleh dibahagikan kepada bahagian ini:

• Kotak kandungan: Kawasan ini digunakan untuk memaparkan kandungan, saiz boleh ditetapkan oleh width dan height.
• Kotak padding: Kawasan kosong yang tertutup di luar kawasan kandungan ditetapkan melalui atribut berkaitan padding.
• Kotak sempadan: membalut kandungan dan pelapik. Saiz ditetapkan melalui atribut berkaitan border.
• Kotak margin: Ini ialah kawasan paling luar, ruang kosong antara kotak dan elemen lain. Saiz ditetapkan melalui atribut berkaitan margin.

Kotak peringkat blok menggunakan sepenuhnya model kotak CSS, manakala kotak sebaris hanya menggunakan sebahagian daripada kandungan yang ditakrifkan dalam model kotak. Atribut

box-sizing

box-sizing mentakrifkan cara penyemak imbas harus mengira jumlah lebar dan ketinggian sesuatu elemen.

• content-box (nilai lalai) , iaitu model kotak standard, width: 100px bermakna kawasan kandungan akan berukuran 100px lebar.
  • Saiz kotak = content(100px) padding border
• border-box, iaitu model kotak alternatif (IE) , width: 100px bermakna jumlah 内容区 边框 内边距 ialah 100px lebar.
  • Saiz kotak = content padding border = 100px

Tanpa mengira model , margin Mereka tidak termasuk dalam saiz sebenar - sudah tentu, ia akan menjejaskan ruang yang diduduki oleh kotak pada halaman, tetapi ia akan menjejaskan ruang di luar kotak.

display

Konsep boleh ditambah di sini - jenis paparan dalaman dan luaran.

• Jenis paparan luaran , kami mengawal sama ada kotak itu sebaris atau sebaris dengan menetapkan atribut kotak display, seperti blok inline atau block tahap.
• Jenis paparan dalaman , yang menentukan cara elemen di dalam kotak dibentangkan.

Jika display: flex ditetapkan, pada elemen, jenis paparan luar ialah block, tetapi jenis paparan dalam ditukar kepada flex. Semua elemen anak langsung kotak akan menjadi elemen flex dan akan dibentangkan mengikut peraturan flexbox (Flexbox).

Terdapat juga nilai istimewa -- display: inline-block, yang menyediakan keadaan perantaraan antara sebaris dan blok. Ini sangat berguna untuk situasi berikut: tiada pembalut garisan berlaku, tetapi lebar dan ketinggian boleh ditetapkan, yang bermaksud bahawa beberapa kesan peringkat blok dicapai:

• Menetapkan width dan height atribut akan berkuat kuasa .
• padding, margin dan border tolak elemen lain.

Elemen sebaris/elemen peringkat blok

Dalam HTML4, elemen dibahagikan kepada dua kategori: inline (elemen sebaris) dan block ( elemen peringkat blok).

1. Apakah elemen sebaris?

Elemen sebaris hanya menduduki ruang yang terdapat pada sempadan label yang sepadan.

Elemen sebaris biasa termasuk a, b, span, img, strong, sub sup, button, input, label, select, textarea

2. Apakah elemen peringkat blok?

Elemen peringkat blok menduduki seluruh ruang elemen induknya (bekas), sekali gus mewujudkan "blok". Biasanya pelayar akan menambah baris baru sebelum dan selepas elemen peringkat blok.

Elemen peringkat blok biasa termasuk div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4 , h5, h6 , p

3.

• Dalam format (lalai), elemen sebaris tidak akan membalut, tetapi elemen peringkat blok akan.

• Kandungan (lalai), elemen sebaris hanya boleh mengandungi data dan unsur sebaris lain. Elemen peringkat blok boleh mengandungi elemen sebaris dan elemen peringkat blok lain.

• Pada atribut :

  • Elemen sebaris
    • width dan height Tetapan tidak sah (ketinggian garis boleh ditetapkan),
    • pelapik (padding), jidar (margin) dan jidar (border) dalam arah atas dan bawah Tiada kesan pada unsur lain.
  • Elemen peringkat blok
    • width dan atribut height turut dimainkan,
    • lapik (padding), jidar (margin) dan sempadan (border) akan "menolak" elemen lain dari sekeliling elemen semasa

runtuhkan margin

.

Apa yang akan berlaku

margin-topJing menegak dua atau lebih elemen blok bersebelahan dalam aliran biasa akan runtuhmargin-bottom

Bersebelahan

: Ini bermakna tidak dipisahkan oleh kandungan tidak kosong, padding, jidar atau jelas

Arah menegak

: Ini bermakna hanya jidar menegak boleh Bagaimana

• diselesaikan?

Unsur

yang mencipta dan anak/adiknya tidak akan runtuh

• tetapan / , beberapa senario khusus: BFC

  Elemen induk
dan elemen anak
• bertindih.

  paddingPertindihan berlaku kerana ia bersebelahan, jadi kami boleh menyelesaikan masalah dengan itu. Kita boleh menetapkan nilai border,

  untuk elemen induk memisahkannya.

  • margin-topmargin-top elemen induk dengan ketinggian

    bertindih dengan

    elemen anak. border-toppadding-top bertindih satu kerana ia bersebelahan dan satu lagi kerana ketinggian unsur induk tidak tetap. Oleh itu, kita boleh menetapkan

    dan
  untuk elemen induk untuk memisahkannya, atau kita boleh menetapkan ketinggian untuk elemen induk
  • dan

    juga boleh menyelesaikan masalah ini. automargin-bottommargin-bottom

    ialah elemen tanpa kandungan, dan pertindihan

    dan border-bottomnya sendiri berlaku. padding-bottommax-heightKita boleh menyelesaikan masalah ini dengan menetapkan min-height,

    atau ketinggian untuknya.

  • margin-topmargin-bottom

    Faktor yang mencetuskan border padding

(kecuali tiada)

(kecuali boleh dilihat)BFC

(table-sel/table-caption/inline-block)

• float(kecuali statik/relatif)
• overflowUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:
Video Pengaturcaraan
• ! ! display

Atas ialah kandungan terperinci Apakah keruntuhan margin? Dalam keadaan apa ia muncul? Bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!