Як позбутися зайвого місця під 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/… .

— Даніель

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: 0на svg та / або його контейнер не мало ніякої різниці. Тільки display: blockвирішив. Це така помилка, якщо ви випадково працюєте над великим SVG, тому що ніколи не думаєте про це як про вбудований. Якщо у вас є маленька піктограма, це має сенс.

— devuxer

display: blockне працює для мене, але vertical-alignзробив

— Jay

12

svgє inlineелементом. inlineелементи залишають пробіли.

Рішення:

Додайте display:blockдо svgабо зробіть висоту батьківського div такою ж, як svg.

ДЕМО тут.

— Хірал
джерело

4

Інша альтернатива - додати font-size: 0до svg батьків.

— Анджело Лукас
джерело

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заздалегідь невідомо висоти .

— Даніель

1

просто додайте висоту до основного елементу div

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

— Фаршад
джерело

0

Змініть свій стиль на

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

— jcdsvg
джерело