Mengapa Terdapat Jurang Antara Elemen Sekatan Sebaris Saya?

Isu Jarak Elemen Blok Sebaris

Elemen blok sebaris, seperti namanya, dipaparkan sebagai elemen sebaris tetapi juga boleh mempunyai lebar dan ketinggian tetap, menjadikannya berkelakuan seperti elemen blok. Walau bagaimanapun, dalam sesetengah kes, unsur-unsur ini mungkin menunjukkan jarak yang tidak dijangka antara unsur tersebut.

Jarak ini timbul kerana unsur blok sebaris bergantung kepada ruang putih, bermakna ia mewarisi ruang putih daripada unsur yang mengandunginya. Dalam contoh yang disediakan:

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}

Fon yang digunakan untuk teks dalam item senarai mempunyai tetapan ruang putih lalai, biasanya ruang 4px. Jarak ini diwarisi oleh elemen blok sebaris, menyebabkan ruang yang tidak perlu di antara mereka.

Untuk menangani isu ini, beberapa pendekatan boleh diambil:

• Gabungkan item senarai : Alih keluar pemisah baris antara item senarai dan sebaris mereka dalam satu baris.
• Sekat teg senarai: Alihkan teg permulaan dan akhir item senarai ke baris yang sama, alih keluar ruang putih di antaranya.
• Tetapkan semula fon -saiz: Tambah saiz fon: 0; kepada elemen induk item senarai. Ini menetapkan semula tetapan ruang putih yang diwarisi. Kemudian, tetapkan saiz fon untuk kandungan dalam item senarai kepada nilai yang diingini.

Kaedah pilihan ialah pendekatan terakhir, kerana ia mengekalkan kebolehbacaan HTML sambil menetapkan semula tetapan ruang putih. Dengan menetapkan saiz fon: 0; pada elemen induk, ruang putih dihapuskan dengan berkesan dan lebar sebenar elemen blok sebaris dipaparkan dengan tepat.

Atas ialah kandungan terperinci Mengapa Terdapat Jurang Antara Elemen Sekatan Sebaris Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!