Why is my containing span larger than my svg?

Question

I have an svg that is wrapped in a span. The svg has a set height and width of 15px.

<span>
    <svg xmlns="http://www.w3.org/2000/svg" id="remove-circle" viewBox="0 0 1200 1200.0071" width="15px" height="15px"><path d="..."/></svg>
</span>

I wrap the svg in a span so I can more easily position it, but it then has a height of 19px. I have tried setting the line-height to 0, but that didn't change anything. What do I need to do to make the span the same size as the svg?

are there any other classes in your CSS that might be at play? — blurfus, Aug 09 '17 at 23:15
It is a react component using CSS modules so there shouldn't be anything messing with the CSS — jhamm, Aug 09 '17 at 23:17
does this fix it? https://stackoverflow.com/questions/24626908/how-to-get-rid-of-extra-space-below-svg-in-div-element — Michael Coker, Aug 09 '17 at 23:22
@JM-AGMS it will still add 2px to the height... looks like a different issue as mentioned in the comment above — blurfus, Aug 09 '17 at 23:23

score 10 · Accepted Answer · answered Aug 09 '17 at 23:39

10

I was able to reproduce this locally and fixed it by applying the following CSS to the surrounding <span>

span {
  display: inline-flex;
}

answered Aug 09 '17 at 23:39

Andy Hoffman

18,436
4
42
61

Any idea why this is? – Crhistian Ramirez Jun 28 '22 at 02:50

Why is my containing span larger than my svg?

1 Answers1