Как избавиться от лишнего места под svg в элементе div

88

Вот иллюстрация проблемы (проверено в Firefox и Chrome):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Развернуть фрагмент

Посмотреть на JSFiddle

Обратите внимание на дополнительное redпространство divпод синим svg.

Уже пробовал устанавливать paddingи marginоба элемента 0, но безуспешно .

html css svg Даниэль
источник
Похоже, это связано с аналогичной проблемой с изображениями, например stackoverflow.com/questions/7774814/… .
Daniel

Ответы:

174

Вам нужно display: block;на вашем svg.

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

Это связано с тем, что элементы встроенного блока (например, <svg>и <img>) располагаются на базовой линии текста. Дополнительное пространство, которое вы видите, - это пространство, оставшееся для размещения нижних элементов символов (хвост на 'y', 'g' и т. Д.).

Вы также можете использовать, vertical-align:topесли вам нужно его оставить inlineилиinline-block

Энди
источник
Удивительный. Так все ли встроенные элементы добавляют пустое пространство внизу?
clapas
2
Объяснение заключается в том, что inline-blockэлементы (например, <svg>и <img>) располагаются на базовой линии текста. Дополнительное пространство, которое вы видите, - это пространство, оставшееся для размещения нижних элементов символов (хвост на 'y', 'g' и т. Д.).
Paul LeBeau,
1
Я бы предпочелvertical-align:top
Джон Сяо
Я был уверен, что дополнительное пространство связано с этим line-height, но установка line-height: 0svg и / или его контейнера не имела никакого значения. Только display: blockрешил это. Это такая ошибка, если вам случится работать с большим SVG, потому что вы никогда не подумаете о нем как о встроенном. Однако, если у вас есть маленькая иконка, это имеет смысл.
devuxer
display: blockне работает для меня, но vertical-alignсделал
Jay
12

svgэто inlineэлемент. inlineэлементы покидают пробел.

Решение:

Добавить display:blockк svg, или высота делают из родительского DIV так же , как svg.

ДЕМО здесь.

Hiral
источник
4

Другой вариант - добавить font-size: 0к svg parent.

Анджело Лукас
источник
3

Измените displayсвойство svg на block.

Малахия
источник
1

Попробуйте добавить height:100pxк divи используя height="100%"на svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
данроди
источник
4
Спасибо за ваш комментарий. Это работает нормально, но становится сложно, если svgзаранее не знать высоту .
Daniel
1

просто добавьте высоту к основному элементу div 

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Фаршад
источник
0

Измени свой стиль на

style = "цвет фона: красный; высота строки: 0;"

jcdsvg
источник