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

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

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

http://jsfiddle.net/EXLSF/

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

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

Ответ 1

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

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

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

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

Ответ 2

svg является элементом inline. Элементы inline оставляют пустое пространство.

Решение:

Добавьте display:block к svg или задайте высоту родительского элемента div, равную svg.

ДЕМО здесь.

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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