white line between svg and other elements

Question

I have very simple svg with just one color and three polygon points.

In Chrome on some width's there is a white line before th svg which should not be there:

On top there is a div with the same color. The svg even overlaps to the div with the same color with margin-bottom -10px; but that white line appears all the time:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1920 145" style="enable-background:new 0 0 1920 145;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#262120;}
</style>
<g>
    <polygon class="st0" points="1920,145 0,0 1920,0    "/>
</g>
</svg>

What's the catch here?

Answer 1

This could be down to the fact that all html elements are set with a line height of normal in css.

line-height: 0; 

may solve this issue 🙇‍♂️