Mengapa Elemen Induk Saya Mempunyai Bar Skrol Menegak Walaupun Ia dan Anaknya Mempunyai Ketinggian yang Sama?

Mengatasi Bar Tatal Menegak Walaupun Anak dan Ibu Bapa Sama Tinggi

Dalam HTML, apabila menggunakan CSS untuk menggayakan elemen bersarang di mana ibu bapa dan anak mempunyai ketinggian yang sama, adalah mungkin untuk menemui bar skrol menegak dalam elemen induk. Ini boleh mengelirukan kerana nampaknya bar skrol tidak sepatutnya diperlukan.

Punca: Garis Pangkal Penjajaran Menegak

Punca isu ini terletak pada lalai Sifat CSS untuk elemen peringkat sebaris, termasuk blok sebaris (cth., div dengan paparan: blok sebaris): jajaran menegak: garis dasar. Dalam tipografi, aksara seperti "j" dan "g" dilanjutkan di bawah garis dasar. Jarak garis dasar ini mewujudkan ketinggian tambahan dalam elemen induk.

Menyelesaikan Masalah

Untuk mengalih keluar bar skrol menegak yang tidak dijangka, anda boleh melaraskan penjajaran menegak elemen anak menggunakan sifat penjajaran menegak. Menetapkannya ke atas, bawah atau tengah, bukannya garis dasar lalai, akan menghapuskan jarak tambahan dan menghalang bar skrol daripada dipaparkan:

.sideBar, .contentHolder {
  vertical-align: top; // or 'bottom', 'middle'
}

Alternatif

Selain melaraskan penjajaran menegak, terdapat pilihan lain untuk menyelesaikan isu ini:

• Gunakan paparan: sekat dan bukannya paparan: blok sebaris untuk elemen anak.
• Tetapkan ketinggian baris: 0 pada elemen induk.
• Tetapkan saiz fon: 0 pada elemen induk (anda boleh mengatasinya pada anak elemen jika perlu).

Atas ialah kandungan terperinci Mengapa Elemen Induk Saya Mempunyai Bar Skrol Menegak Walaupun Ia dan Anaknya Mempunyai Ketinggian yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!