Mengapa Imej Mempunyai Pelapik Bawah Tidak Dijangka Walaupun dengan Margin Sifar dan Pelapik?

Memahami Padding Misterius Di Bawah Imej

Mengapa imej selalunya mempunyai ruang kosong yang tidak dapat dijelaskan di bawahnya, walaupun apabila padding dan margin ditetapkan kepada sifar?

Penjelasan

Imej dianggap sebagai elemen blok sebaris, serupa dengan aksara dalam teks. Mereka mematuhi peraturan garis dasar, iaitu garisan yang merentasi bahagian bawah kebanyakan huruf. Walau bagaimanapun, huruf tertentu seperti "p" dan "q" mempunyai turunan yang memanjang di bawah garis dasar. Untuk mengelakkan penurun ini daripada bertembung dengan baris berikutnya, ruang dikhaskan di bawah garis dasar.

Imej dijajarkan dengan garis dasar ini, menghasilkan ruang tambahan di bahagian bawah walaupun tanpa teks.

Penyelesaian

Untuk mengurangkan isu ini, gunakan sifat CSS penjajaran menegak: bawah ke imej itu. Ini akan menjajarkan imej ke bahagian bawah baris, menghapuskan padding misterius.

Awas

Sementara penyelesaian ini menyelesaikan isu padding, ia boleh mencipta satu lagi jika imej adalah lebih kecil daripada ketinggian garisan. Dalam kes sedemikian, ruang tambahan mungkin muncul di atas imej. Untuk membetulkan ini, tambahkan ketinggian garis: 1px pada elemen bekas.

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