Selesaikan cara untuk memecahkan kesenjangan antara label IMG

Dalam proses pengembangan yang biasa, kita sering perlu menggunakan beberapa gambar.

 <! Bawah: Red Solid;} UL {Border: 1px Solid Blue; = Lipeng.png> </li> </ul> </body> </html>

Tetapi pada saat ini kami menemukan masalah, mengapa ada garis tambahan di bawah gambar saya?

Apa yang terjadi?

Bukankah saya sudah membersihkan perbatasan luar dan dalam antara IMG?

Bahkan, ini sebenarnya adalah hantu yang merupakan elemen inline.

Apa artinya?

Ini berarti bahwa pada kenyataannya, seperti teks gambar dan elemen asosiasi internal lainnya, ini selaras dengan baseline induknya, tetapi Anda selaras dengan baseline.

Karena kita tahu alasan masalah ini, jauh lebih sederhana untuk menyelesaikannya.

Karena ini adalah elemen inline, masalah ini secara alami dapat menyelesaikan masalah ini dengan sederhana dan kasar, yaitu mengubah elemen kita menjadi kepribadian yang dipersonalisasi, dapatkah itu diubah dari inline menjadi blokir?

 <Gaya Tipe = CSS> IMG {Height: 200px; : 0; margin: 0;} </style>

Ini terlalu kasar, jenis kelaminnya diubah, bagaimana kita bisa bermain dengan bahagia, jadi kita harus mencoba kurva untuk menyimpannya.

 <Gaya Tipe = Teks/CSS> IMG {Height: 200px; ;

Dapat dilihat bahwa ini juga dapat mencapai hasil yang diinginkan.

Alasannya adalah bahwa atribut default vertikal-Align adalah baseline.

Tetapi metode penyelarasan dimodifikasi, jadi mungkin juga menyebabkan masalah. Sekarang setelah Anda tidak lagi dalam dokumentasi saat ini, Anda secara alami tidak akan selaras dengan mengacu pada teks ini saat Anda berbaring.

Kita bisa menggunakan mengambang.

 <Tipe Gaya = Teks/CSS> IMG {Height: 200px; Blue;

Ini juga dapat menyelesaikan masalah ini, tetapi harap dicatat bahwa meskipun mengambangnya bagus, jangan serakah.

Anda harus dapat menyelesaikan dampak mengambang dengan benar, dan jika Anda awalnya berencana untuk melakukan efek teks surround, maka menggunakan mengambang harus menjadi pilihan terbaik Anda.

Jika semua skema di atas tidak dapat menyelesaikan masalah Anda, maka hanya pembunuhan besar saya yang dikorbankan.

Anda dapat memberikan elemen induk Anda untuk mengatur ukuran teks ke 0.

 <Tipe Gaya = Teks/CSS> IMG {Height: 200px; ;

Karena Anda selaras sesuai dengan garis dasar teks, saya akan mengatur teks secara langsung, sehingga Anda tidak dapat memposisikannya, tetapi pendekatan ini hanya disarankan ketika Anda sedang terburu -buru digunakan.

Nah, di atas adalah empat solusi untuk masalah ini. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.