CODEWITHSUNDEEP
htmlcss
jhamm
jhamm

Reputation: 25062

Why is my containing span larger than my svg?

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?

Upvotes: 10

Views: 2561

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

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

span {
  display: inline-flex;
}

Upvotes: 13

Related Questions