0

I have been making a website using HTML, and I have been trying to remove the whitespace between a div and an SVG. As you can see in the website here, there is a small strip of whitespace between the darker SVG and the lighter div. I have been trying to remove it using lots of different methods.

I have tried changing the margin and padding on the body and each of the elements to 0, I have tried changing the height and width of each of the elements but that changes the size and doesn't remove the whitespace, I have tried changing the overflow to hidden, auto and visible, changing the position to static, relative, sticky, absolute but still nothing worked and I can't think of anything else to try. The code for the SVG is here:

SVG HTML:

<svg width="100%" height="50px" margin=0 padding=0>
      <rect class="topbar" width="100%" height="70" margin=0 padding=0 style="fill:rgb(86,87,86); display:block" z-index="2" margin=0 padding=0/>
</svg>

SVG CSS:

.topbar {
    position: relative;
    left: 0;
    top: auto;
    z-index: 10;
    overflow: hidden;
  }

and here is the code for the div:

div HTML:

<div class="sidebar" margin=0 padding=0></div>

div CSS:

.sidebar {
    overflow: hidden;
    background-image: url('square.png');
    width: 100px;
    height: 10000000px;
    position: relative;
    z-index: 1;
    left: 0;
    bottom: 0;
  }
MrHDumpty
  • 56
  • 1
  • 10
  • Protip: [Never link "here"](https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here). – isherwood Nov 04 '22 at 20:00

1 Answers1

1

one simple solution is to set the display of your body to "flex" and set flex-direction: column

 body {
    height: auto;
    width: auto;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
kimia shahbaghi
  • 302
  • 7
  • Thanks! The HTML works exactly how I wanted it to now! Weird that I haven't seen anyone mention this solution before. – MrHDumpty Nov 04 '22 at 20:08