SVG seems to have margin(?) at bottom of it, can't remove it

Question

<div id="navbarContentHamburger">
     <svg width="25" height="25">
          <path d="M0,5 50,5" stroke="#fff" stroke-width="3"/>
          <path d="M0,10 50,10" stroke="#fff" stroke-width="3"/>
          <path d="M0,15 50,15" stroke="#fff" stroke-width="3"/>
     </svg>
</div>

This is the code I use to make my hamburger menu. I pair it next to my "Menu" header tag and if I inspect element on my SVG, it seems it has a margin of around 2-3px underneath it, pushing my navbar down.

Tried adding an !important tag to margin-bottom:0; but that does not seem to work.

Do you have an example website? Because this code seems to be good — Marcin Szwarc, Jun 03 '18 at 11:20
actually yes, I should have linked it.https://donnieberry97.github.io/project2/ — Donnie Berry, Jun 03 '18 at 11:21

score 2 · Answer 1 · answered Jun 03 '18 at 11:45

2

Your svg actually does not have margin, so thats not part of the problem. Try adding display: block; to the svg element itself. Alternatively setting its height to just 21 should fix that issue also, as your svg currently is higher than needed.

answered Jun 03 '18 at 11:45

MarvHock

793
7
16

SVG seems to have margin(?) at bottom of it, can't remove it

1 Answers1