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?

Answer 1

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

span {
  display: inline-flex;
}