Mengapa Imej Saya Mempunyai Ruang Putih Tambahan Di Bawahnya?

Menyelesaikan Masalah Ruang Putih Misteri Di Bawah Teg Imej

Apabila menukar saiz imej menggunakan tag, anda mungkin menghadapi jurang yang membingungkan di bawah imej. Walaupun memeriksa kod dengan teliti, sumber ruang ini masih sukar difahami.

Memahami Penjajaran Garis Dasar

Jawapannya terletak pada konsep penjajaran garis dasar dalam HTML. Elemen sebaris, termasuk teg, diselaraskan dengan garis dasar, yang memuatkan aksara yang memanjang di bawah garis dasar, yang dikenali sebagai descenders. Ini memastikan elemen teks mengekalkan kedudukan menegak yang konsisten.

Menyelesaikan Ruang Putih

Untuk menyelesaikan ruang putih yang disebabkan oleh penjajaran garis dasar, pertimbangkan penyelesaian berikut:

• Gunakan Jajaran-Tegak: Tambah jajaran menegak: bawah ke tag untuk menjajarkannya di bahagian bawah bekas, menghapuskan jurang.
• Tukar Sifat Paparan: Tukar teg daripada sebaris ke peringkat blok (paparan: blok) untuk mengalih keluar penjajaran garis dasar.
• Laraskan Ketinggian Garisan Bekas: Tingkatkan ketinggian garisan pada bekas untuk menolak kandungan ke bawah, mencipta ruang yang cukup untuk memuatkan turunan.
• Tetapkan Saiz Fon Bekas kepada 0: Tetapkan saiz fon: 0 pada bekas untuk menghapuskan sebarang ruang yang dicipta oleh turunan. Secara pilihan, tetapkan semula saiz fon pada elemen kanak-kanak.

Nota Tambahan

• Isu ini tidak berpunca daripada jidar atau pelapik, menjadikannya sukar untuk mengenal pasti menggunakan alat pembangun.
• Jurang terhasil daripada ketinggian kandungan disebabkan garis dasar penjajaran.
• Elemen sebaris lain (cth., teks, span) juga mungkin mempamerkan gelagat ini.

Atas ialah kandungan terperinci Mengapa Imej Saya Mempunyai Ruang Putih Tambahan Di Bawahnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!