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

Mengelakkan Sempadan Pendua dalam CSS

Apabila elemen bersebelahan dengan sempadan diletakkan bersebelahan antara satu sama lain, artifak visual yang dikenali sebagai "sempadan berganda" boleh berlaku di persimpangan sempadan. Untuk menghapuskan kesan yang tidak diingini ini, pertimbangkan pendekatan CSS berikut:

Pilihan 1: Menggunakan Outline Property

Untuk situasi di mana susunan unsur tidak dapat diramalkan, menggunakan sifat garis boleh mencegah sempadan dua dengan berkesan:

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

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

Perhatikan bahawa garis besar tidak disokong dalam penyemak imbas lama (IE7 dan lebih awal).

Pilihan 2: Margin Negatif dengan Sempadan

Jika menggunakan sempadan lebih disukai, gunakan margin negatif untuk mengimbangi sempadan berganda:

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

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