Mengapa SVG Saya Mempunyai Ruang Tambahan Di Bawahnya dalam Div, dan Bagaimana Saya Boleh Membetulkannya?

Menghapuskan Lebihan Ruang Menegak Di Bawah Elemen SVG dalam Bekas Div

Dalam pembangunan web, menghadapi ruang tambahan di bawah elemen SVG dalam bekas div boleh menjadi isu yang mengecewakan. Masalah ini timbul disebabkan sifat sebaris unsur SVG, yang menyebabkan unsur tersebut dijajarkan dengan garis dasar teks.

Contoh:

Pertimbangkan coretan kod berikut:

<div>
<p>Apabila dipaparkan dalam Firefox atau Chrome, anda akan melihat bahagian ruang merah di bawah SVG biru unsur. Ruang tambahan ini mewakili kawasan yang dikhaskan untuk turunan aksara (cth., ekor huruf "y").</p>
<p><strong>Penyelesaian:</strong></p>
<p>Untuk menghapuskan lebihan ruang ini, anda perlu menetapkan sifat paparan elemen SVG untuk disekat. Ini membolehkan elemen SVG berkelakuan sebagai elemen peringkat blok dan menduduki keseluruhan lebar bekas induknya yang tersedia.</p>
<pre class="brush:php;toolbar:false"><div>
<p>Dengan menggunakan teknik ini, anda boleh menghalang ruang tambahan daripada muncul di bawah elemen SVG , memastikan ia sejajar dengan bahagian atas bekas div.</p>
<p><strong>Tambahan Pilihan:</strong></p>
<p>Jika anda lebih suka mengekalkan elemen SVG sebaris atau blok sebaris, anda boleh menggunakan sifat jajaran menegak untuk menjajarkannya ke bahagian atas bekas induknya.</p>
<pre class="brush:php;toolbar:false"><div> <p>Kaedah ini mencapai hasil yang sama seperti paparan tetapan: blok, tetapi membenarkan elemen SVG mengekalkan status blok sebaris atau sebarisnya.</p>
</div>