如何删除页面 html/css 开头的空白 space

Question

我正在尝试在 CodePen 中用 GIFS 创建一个无限循环的网站（link：https://codepen.io/sofiazymnis/pen/yLNQWWR?editors=1111）。

由于某种原因，第一个 GIF 的顶部有空白，这破坏了无限滚动循环的无缝性。我试过 margin-top: 0;但它似乎不起作用。

有什么想法吗？

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%;
}

Answer 1

将 margin:0; 或仅 margin-top: 0; 添加到 body{} CSS 部分，而不是图像本身。

并且 codepen 正在验证它，因为 $blue 不是 CSS 属性而是 SCSS.. 所以请删除 $blue 变量并尝试使用静态值, codepen 会正确渲染它，像这样：

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

Answer 2

body 上面有边距。如果我进入检查器，我可以将 margin-top: 0 应用于 body 元素然后消失。

在您的 CSS 中试一试，希望它能奏效。

此外，正如 Ron 所指出的，您使用的是 SASS 变量而不是 CSS 变量。查看 MDN，了解 CSS variables 是如何完成的。

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

如何删除页面 html/css 开头的空白 space

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

html

css

gif

infinite-loop