Rumah > hujung hadapan web > tutorial css > Mengapa Elemen Blok Sebaris Mencipta Bar Skrol Menegak Walaupun dengan Ketinggian Padanan?

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

Linda Hamilton
Lepaskan: 2024-11-25 01:17:17
asal
933 orang telah melayarinya

Why Do Inline-Block Elements Create Vertical Scrollbars Even with Matching Heights?

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan