How to remove empty space in beginning of page html/css

Question

I'm trying to create an infinitely looping website made out of GIFS in CodePen (link: https://codepen.io/sofiazymnis/pen/yLNQWWR?editors=1111).

For some reason the first GIF has a margin on the top, which ruins the seamlessness of the infinite scrolling loop. I tried margin-top: 0; but it doesn't seem to work.

Any ideas?

html:

<html>
<head>
<style>


body {
    height: 7000px; /* Used to enable scrolling */
  background: linear-gradient(#86c2db 0%, #c8a096 40%, #263c63 60%,     #86c2db 100%);
  /*background-size: 100% 1000vh;*/
  /*background-repeat:repeat-y;*/

}


::scrollbar {
  display: none;
}

</style>
</head>
<body>
 <img src="https://pro2-bar-s3-cdn-cf3.myportfolio.com/90c10bc74835779c958d7b88b56e6448/4272adea-61c3-4477-b8d0-a6f5ae78f511.gif?h=55dafeb4ec2ea49fe386c59f2590d02c"/>

css:

$blue: #a3d5d3;

body {
  background-color: $blue;
}
img{
  display:block;
  margin:auto;
  line-height: 0;
  max-width:50%;
}

score 0 · Answer 1 · answered Mar 29 '20 at 03:00

0

Add margin:0; or only margin-top: 0; to the body{} CSS section, not on the image itself.

And codepen is nto validating it, as $blue is not a CSS property but SCSS.. so please remove the $blue variable and try with a static value, and codepen will render it properly, like so:

body {
  background-color: #a3d5d3;
  margin-top: 0;
}

answered Mar 29 '20 at 03:00

Ron

5,900
2
20
30

That worked great! Thank you so much! – Sofia Mar 29 '20 at 17:04
If this helped solve your issue, do not forget to mark the answer as Accepted. Thank you – Ron Mar 29 '20 at 17:05

Dani Amsalem · Accepted Answer · 2020-03-29T03:07:08.083

0

body has a margin on it. If I go into inspector, I can apply margin-top: 0 to the body element and that goes away.

Give it a try in your CSS and cross your fingers that it will work.

Additionally, as Ron indicated, you're using a SASS variable not a CSS variable. Check out the MDN on how CSS variables are done.

:root {
  --blue: #a3d5d3;
}
body {
  background-color: var(--blue);
  margin-top: 0;
}

edited Mar 29 '20 at 03:07

answered Mar 29 '20 at 03:01

Dani Amsalem

1,266
17
26

How to remove empty space in beginning of page html/css

2 Answers2