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

Jawaban:

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