Mengapa Elemen Blok Sebaris Mencipta Bar Skrol Menegak Walaupun dengan Ketinggian Padanan?

Mengapa Bar Tatal Menegak Muncul Apabila Ibu Bapa dan Anak Mempunyai Ketinggian Yang Sama?

Masalah:

Apabila menggunakan elemen blok sebaris (.sideBar dan .contentHolder) dalam bekas induk (.displayContainer), sebuah bar skrol menegak yang tidak diperlukan muncul walaupun kedua-dua elemen induk dan anak mempunyai ketinggian pengiraan yang sama.

Punca:

Sifat jajar menegak lalai untuk elemen blok sebaris ialah "garis dasar", yang menyimpan ruang untuk turunan (huruf kecil yang memanjang di bawah garis dasar). Ruang tambahan ini menyebabkan bekas melimpah, mencetuskan kemunculan bar skrol.

Penyelesaian:

Untuk menghapuskan bar skrol menegak, laraskan sifat jajar menegak pada elemen anak atau buat salah satu daripada perubahan berikut:

• Tetapkan jajaran menegak kepada nilai berbeza:

  • menjajarkan menegak: atas
  • menjajarkan menegak: bawah
  • menjajarkan menegak: tengah

• Tukar ke paparan: blok:

  • .sideBar { paparan: blok; }
  • .contentHolder { paparan: blok; }

• Tetapkan ketinggian baris: 0 pada induk:

  • .displayContainer { line-height: 0; }

• Tetapkan saiz fon: 0 pada ibu bapa dan pulihkan pada kanak-kanak (jika perlu):

  • .displayContainer { saiz fon: 0; }
  • .sideBar { saiz fon: 16px; }
  • .contentHolder { saiz fon: 16px; }

Atas ialah kandungan terperinci Mengapa Elemen Blok Sebaris Mencipta Bar Skrol Menegak Walaupun dengan Ketinggian Padanan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!