white gap space with a svg

Question

over the first text and the svg from the above i have a white gap space how can i remove that white space here is the code

h1 {
  background-color: red;
}

<div className="wave-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="black"
          fill-opacity="1"
          d="M0,128L288,96L576,0L864,256L1152,64L1440,160L1440,320L1152,320L864,320L576,320L288,320L0,320Z"
        ></path>
      </svg>
  <h1>testing</h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="black"
          fill-opacity="1"
          d="M0,128L48,122.7C96,117,192,107,288,85.3C384,64,480,32,576,58.7C672,85,768,171,864,181.3C960,192,1056,128,1152,112C1248,96,1344,128,1392,144L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
        ></path>
      </svg>
</div>

score 1 · Accepted Answer · answered Sep 06 '20 at 13:32

1

I assumed that you have no margins set on the h1 element.

Just add display: block; to the svg elements. It should do the trick.

answered Sep 06 '20 at 13:32

Magiczne

1,586
2
15
23

thanks that worked but can you explain why? – GRIND Sep 06 '20 at 13:40
You can look at linked questions. Many people explained it and they have done it definitely better than I would do it. – Magiczne Sep 06 '20 at 13:45

white gap space with a svg

1 Answers1