Bagaimana untuk Mencegah Sempadan Berganda dalam CSS: Garis Besar lwn. Margin Negatif?

Mengelakkan Sempadan "Berganda" dalam CSS

Apabila dua elemen bersebelahan dengan sempadan diletakkan bersebelahan, ia mungkin kelihatan seolah-olah mempunyai sempadan dua di persimpangan tempat mereka bertemu. Untuk mengelakkan artifak visual ini, pertimbangkan teknik CSS berikut:

Menggunakan Outline Daripada Sempadan

Untuk elemen yang mungkin muncul dalam sebarang susunan, sifat garis besar menyediakan yang boleh dipercayai penyelesaian:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid;
  margin-top: 1px;
  margin-left: 1px;
}</code>

Jing Negatif

Sebagai alternatif, menggunakan jidar negatif pada elemen kanak-kanak secara berkesan akan "memadam" sempadan berganda:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

Nota untuk Penyemak Imbas Lama

Harta garis besar tidak disokong dalam penyemak imbas lama seperti IE7 dan lebih awal. Dalam kes ini, pendekatan margin negatif disyorkan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Sempadan Berganda dalam CSS: Garis Besar lwn. Margin Negatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!