Rumah >hujung hadapan web >tutorial css >Mengapa Imej Saya dalam Tag Anchor Menunjukkan Ruang Putih Tambahan Di Bawah?

Mengapa Imej Saya dalam Tag Anchor Menunjukkan Ruang Putih Tambahan Di Bawah?

Barbara Streisand
Barbara Streisandasal
2024-12-10 07:13:16336semak imbas

Why Is My Image in an Anchor Tag Showing Extra Whitespace Below?

Cabaran Ruang Putih di Bawah Teg Sauh

Anda telah menghadapi masalah ruang putih yang membingungkan di mana tag sauh yang mengandungi imej kelihatan lebih tinggi sedikit daripada kandungannya. Walaupun menetapkan kedua-dua jidar dan padding kepada sifar, jurang tiga piksel muncul di bawah imej. Percanggahan ini mengganggu penjajaran visual yang dimaksudkan dalam sempadan div sekeliling.

Memahami Punca

Masalahnya terletak pada pemformatan CSS. Secara lalai, imej dipaparkan sebaris, menyerupai aksara teks pada garis dasar bertulis. Malangnya, peletakan ini termasuk ruang putih tambahan yang dikhaskan untuk aksara turun (cth., j, g, y, p).

Menyelesaikan Ruang Putih

Untuk membetulkan isu ini, laraskan penjajaran menegak menggunakan CSS:

img {
  vertical-align: bottom;
}

Dengan menetapkan penjajaran menegak: bawah, anda menjajarkan imej ke bahagian bawah baris teks, dengan berkesan menghapuskan jurang ruang putih. Kini, imej dan jidar anda akan dijajarkan dengan lancar, mencapai kesan visual yang anda inginkan.

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

Kenyataan:
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