Why is there a 5px gap between svg and div?

October 30, 2022

I have an svg and a div, both have 0 margin and there is no white-space between the container. However, there is a 5px gap. Why is that?

.box {
  height:100px;
  background-color:#00cba9;
margin:0;  
  
}

svg{
  padding-bottom:0;
  margin-bottom:0;
  border:solid red 3px;
}

<div class="wrapper">

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#00cba9" fill-opacity="1" d="M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z"></path></svg><div class="box"></div>
</div>

I have seen this issue with a 1px render gap White gap between SVG and div for some browsers, but 5px seems a little strong?

I found that the gap dissapears when using flex box,

.wrapper{  
  display:flex;  
  flex-direction: column;
}

but I still wonder, what could be the reason for the gap?

>Solution :

The space between the div and your svg creates an empty space, you need to set the div font size: 0

Here is an extensive article that explains it. (There are several other solutions to the problem, I presented only one of them)

.wrapper {
  font-size: 0;
}

.box {

  height:100px;
  background-color:#00cba9;
  margin:0;    
}

svg{
  padding-bottom:0;
  margin-bottom:0;
  border:solid red 3px;
}

<div class="wrapper">

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#00cba9" fill-opacity="1" d="M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z"></path></svg><div class="box"></div>
</div>