Как избавиться от лишнего места под 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
источник