Bagaimana cara menghilangkan spasi ekstra di bawah svg dalam elemen div

93

Berikut ilustrasi masalah (diuji di Firefox dan Chrome):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Luaskan cuplikan

Lihat di JSFiddle

Perhatikan redruang ekstra di dalam bagian divbawah biru svg.

Sudah mencoba pengaturan paddingdan margindari kedua elemen ke 0, tetapi tidak berhasil.

html css svg

— Daniel
sumber

Tampaknya terkait dengan masalah serupa dengan gambar, misalnya stackoverflow.com/questions/7774814/… .

— Daniel

182

Anda perlu display: block;pada Anda svg.

<svg style="display: block;"></svg>

Ini karena elemen blok-sebaris (seperti <svg>dan <img>) berada di garis dasar teks. Ruang ekstra yang Anda lihat adalah ruang yang tersisa untuk mengakomodasi keturunan karakter (ekor pada 'y', 'g' dll).

Anda juga bisa menggunakan vertical-align:topjika perlu inlineatauinline-block

— Andy
sumber

Luar biasa. Jadi, apakah semua elemen sebaris menambahkan spasi di bagian bawah?

— clapas

2

Penjelasannya adalah bahwa inline-blockelemen (seperti <svg>dan <img>) berada pada baseline teks. Ruang ekstra yang Anda lihat adalah ruang yang tersisa untuk mengakomodasi keturunan karakter (ekor pada 'y', 'g' dll).

— Paul LeBeau

1

Saya lebih sukavertical-align:top

— John Xiao

Saya yakin ruang ekstra ada hubungannya dengan line-height, tetapi pengaturan line-height: 0pada svg dan / atau wadahnya tidak membuat perbedaan. Hanya display: blockmenyelesaikannya. Ini adalah kesalahan besar jika Anda kebetulan mengerjakan SVG besar karena Anda tidak akan pernah menganggapnya sebagai inline. Namun, jika Anda memiliki ikon kecil, itu masuk akal.

— devuxer

display: blocktidak berhasil untuk saya, tetapi vertical-alignberhasil

— Jay

12

svgadalah sebuah inlineelemen. inlineelemen meninggalkan ruang putih.

Larutan:

Tambahkan display:blockke svg, atau buat tinggi div induk sama dengan svg.

DEMO di sini.

— Hiral
sumber

5

Alternatif lain adalah menambahkan font-size: 0ke orang tua svg.

— Ângelo Lucas
sumber

3

Ubah displayproperti svg menjadi block.

— Maleakhi
sumber

1

Coba tambahkan height:100pxke divdan gunakan height="100%"pada svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

— danrodi
sumber

4

Terima kasih atas komentar Anda. Ini berfungsi dengan baik, tetapi menjadi rumit ketika seseorang tidak mengetahui ketinggian svgsebelumnya.

— Daniel

1

cukup tambahkan tinggi ke elemen div utama

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

— Farshad
sumber

0

Ubah gaya Anda menjadi

style = "background-color: red; line-height: 0;"

— jcdsvg
sumber