2

I'm having trouble figuring out where the extra 3 pixels come from when surrounding my burger menu svg with a button. The only way I know how to fix this is to use display: flex; on the button but this seems like overkill, especially with adding all the vendor-specific versions of flexbox (that get generated for me with a CSS library I use).

The SVG should be 20px in height and I want the button to match this. I could set the button to 20px in height but this does not scale well when I have multiple SVGs across the site which vary in height.

Is there another option besides setting the height explicitly and using flexbox? I would also be interested in knowing why I have these 3 extra pixels. I'm running this in google chrome so maybe it's a browser-specific thing with the default button appearance?

In this code snippet, the red lines are the SVG and there should not be any blue lines below the last red line. The blue lines are from the button's blue background:

button {
  padding: 0;
  border: none;
  background: blue;
  outline: none;
}
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20"><g transform="translate(0 2)"><line x2="26" fill="none" stroke="red" stroke-width="4"/><line x2="26" transform="translate(0 16)" fill="none" stroke="red" stroke-width="4"/><line x2="26" transform="translate(0 8)" fill="none" stroke="red" stroke-width="4"/></g></svg>
<button>

enter image description here

Mayron
  • 2,146
  • 4
  • 25
  • 51
  • 1
    Setting the line-height to 0 fixes it. I just can't tell you why. Was just playing around. Might be a hack for it. – MincedMeatMole Nov 04 '20 at 14:44
  • That's very odd but that's a much better solution which is what I was looking for. Thanks! – Mayron Nov 04 '20 at 14:45
  • the accurate solution is vertical-align:top to the SVG – Temani Afif Nov 04 '20 at 14:47
  • @TemaniAfif the other answers from the already asked question (but for images), suggests that setting the SVG to `display: block` fixes this which is also a good option. – Mayron Nov 04 '20 at 14:51

0 Answers0