Rumah > hujung hadapan web > tutorial css > Mengapa Imej Saya Mempunyai Ruang Tambahan Di Bawahnya Apabila Di Dalam Tag Anchor?

Mengapa Imej Saya Mempunyai Ruang Tambahan Di Bawahnya Apabila Di Dalam Tag Anchor?

DDD
Lepaskan: 2024-12-05 04:38:08
asal
848 orang telah melayarinya

Why Does My Image Have Extra Space Below It When Inside an Anchor Tag?

Menyelesaikan Masalah Jarak Berlebihan Di Bawah Tag Anchor

Apabila menggunakan tag anchor untuk merangkum imej, adalah perkara biasa untuk menghadapi ruang putih yang berlebihan di bahagian bawah . Gangguan visual ini boleh menghalang estetika yang diingini. Untuk menyelesaikan isu ini, memahami punca asas adalah penting.

Sifat paparan sebaris lalai tag anchor menjajarkannya secara mendatar seperti aksara. Penjajaran ini meletakkan imej, yang merupakan penurunan dari segi tipografi, sebahagiannya di bawah garis dasar. Akibatnya, jarak yang diberikan di bawah imej kelihatan melebihi margin sifar dan nilai padding yang dikehendaki.

Untuk menyelesaikan dilema ini, CSS boleh digunakan untuk melaraskan penjajaran menegak imej. Dengan mengisytiharkan img{vertical-align: bottom}, kedudukan imej dianjak ke bawah untuk menjajarkan garis dasarnya dengan garis dasar teg anchor. Ini secara berkesan menghapuskan jarak yang tidak diingini dan menjajarkan imej dengan tepat dengan jidar.

Dengan menggunakan pembetulan CSS mudah ini, ruang putih yang salah dihapuskan, memulihkan keseimbangan visual yang diingini antara imej dan sempadan tertutupnya.

Atas ialah kandungan terperinci Mengapa Imej Saya Mempunyai Ruang Tambahan Di Bawahnya Apabila Di Dalam Tag Anchor?. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan