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,

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