Jak pozbyć się dodatkowego miejsca pod svg w elemencie div

93

Oto ilustracja problemu (przetestowana w przeglądarkach Firefox i Chrome):

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

Zobacz na JSFiddle

Zwróć uwagę na dodatkową redprzestrzeń wewnątrz divniebieskiego poniżej svg.

Próbowałem już ustawić paddingi marginobu elementów 0, ale bez powodzenia.

html css svg Daniel
źródło
Wydaje się, że ma to związek z podobnym problemem z obrazami, np . Stackoverflow.com/questions/7774814/… .
Daniel,

Odpowiedzi:

182

Potrzebujesz display: block;na swoim svg.

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

Dzieje się tak, ponieważ elementy inline-block (takie jak <svg>i <img>) znajdują się na linii bazowej tekstu. Dodatkowa przestrzeń, którą widzisz, to miejsce, które pozostało, aby pomieścić znaki zstępujące (ogon na „y”, „g” itp.).

Możesz również użyć, vertical-align:topjeśli chcesz go zachować inlinelubinline-block

Andy
źródło
Niesamowity. Czy więc wszystkie elementy wbudowane dodają spację na dole?
clapas
2
Wyjaśnienie jest takie, że inline-blockelementy (takie jak <svg>i <img>) znajdują się na linii bazowej tekstu. Dodatkowa przestrzeń, którą widzisz, to miejsce, które pozostało, aby pomieścić znaki zstępujące (ogon na „y”, „g” itp.).
Paul LeBeau
1
Wolałbymvertical-align:top
John Xiao
Byłem przekonany, że dodatkowa przestrzeń ma coś wspólnego line-height, ale ustawienie line-height: 0na svg i / lub jego pojemniku nie robi różnicy. Tylko display: blockto rozwiązałem. Jest to niezła pułapka, jeśli pracujesz nad dużym SVG, ponieważ nigdy nie pomyślałbyś o nim jako o inline. Jeśli jednak masz małą ikonę, ma to sens.
devuxer
display: blocknie działa dla mnie, ale vertical-aligntak
Jay
12

svgjest inlineelementem. inlineelementy pozostawiają spację.

Rozwiązanie:

Dodaj display:blockdo svg, lub dokonać wysokość rodzica dział samo jak svg.

DEMO tutaj.

Hiral
źródło
5

Inną alternatywą jest dodanie font-size: 0do rodzica svg.

Ângelo Lucas
źródło
3

Zmień displaywłaściwość svg na block.

Malachiasz
źródło
1

Spróbuj dodać height:100pxdo divi użyć height="100%"on svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
danrodi
źródło
4
Dzięki za komentarz. Działa to dobrze, ale staje się trudne, gdy nie zna się z svggóry wysokości.
Daniel,
1

po prostu dodaj wysokość do głównego elementu div 

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Farshad
źródło
0

Zmień swój styl na

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

jcdsvg
źródło