1

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?

enter image description here

.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?

Adam
  • 25,960
  • 22
  • 158
  • 247
  • 1
    don't use font-size:0, it's hack and it's not about the gap between inline-block element, it's related to vertical-alignment – Temani Afif Oct 30 '22 at 09:18

1 Answers1

-1

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>
Haim Abeles
  • 982
  • 6
  • 19
  • 1
    Do you know any css reference that explains this space? I only know that whitespaces can cause something like this, if you have inline blocks. Never saw this scenario here. – Adam Oct 30 '22 at 08:42
  • There is a wide article here that explains it, I will add it to the answer as well. (There are several other solutions to the problem, I presented only one of them) https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – Haim Abeles Oct 30 '22 at 08:44
  • Oh okay! I actually didn't realise svg is an inline block. So if I change svg to block, it also works. But whats strange is, I already had that inline fix, because I had no whitespace between the tags https://css-tricks.com/fighting-the-space-between-inline-block-elements/#aa-remove-the-spaces – Adam Oct 30 '22 at 08:48
  • The problem really stems `inline-block` elements, I was happy to help :) – Haim Abeles Oct 30 '22 at 08:49