Mengapa Terdapat Jarak Tidak Dijangka Di Bawah Imej Saya, Walaupun dengan Sifar Padding dan Margin?

Jarak Tidak Dijangka Di Bawah Imej: Punca dan Penyelesaian

Walaupun menggunakan nilai pelapik dan jidar sifar, imej secara tidak jelas memaparkan ruang kosong di bawahnya. Isu yang membingungkan ini timbul daripada gelagat imej yang wujud, yang dianggap sebagai aksara dalam elemen blok sebaris.

Sebagai aksara, imej diselaraskan dengan garis dasar, garis yang ditetapkan untuk aksara teks untuk mengekalkan konsistensi. Walau bagaimanapun, huruf khusus seperti "q" dan "j" mempunyai turunan yang memanjang di bawah garis dasar. Untuk mengelakkan perlanggaran dengan baris berikutnya, ruang dikhaskan di bawah garis dasar.

Rajah ini menggambarkan pelbagai baris yang mengawal penjajaran teks:

[Masukkan rajah garis dasar daripada WHATWG]

Oleh itu , imej diselaraskan dengan garis dasar walaupun tanpa teks. Untuk membetulkan keadaan ini, pelarasan CSS mudah boleh dilaksanakan:

img {
  vertical-align: bottom;
}

Pengubahsuaian ini menjajarkan imej ke bahagian bawah baris, menghapuskan ruang misteri. Walau bagaimanapun, apabila berurusan dengan imej kecil (lebih pendek daripada ketinggian garis), ruang tambahan mungkin muncul di atas imej. Untuk menyelesaikan masalah ini, tetapkan ketinggian baris: 1px; kepada elemen kontena.

Penjelasan dan penyelesaian komprehensif ini harus menangani kebimbangan ramai yang menghadapi isu yang sama.

Atas ialah kandungan terperinci Mengapa Terdapat Jarak Tidak Dijangka Di Bawah Imej Saya, Walaupun dengan Sifar Padding dan Margin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!