如何删除页面开头的空白区域html / css [重复]答案

【问题标题】：How to remove empty space in beginning of page html/css [duplicate]如何删除页面开头的空白区域html / css [重复]
【发布时间】：2020-07-09 14:01:57
【问题描述】：

我正在尝试用 CodePen 中的 GIFS 创建一个无限循环的网站（链接：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%;
}

【问题讨论】：

标签： html css infinite-loop gif

【解决方案1】：

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

在你的 CSS 中试一试，然后祈祷它会起作用。

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

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

【讨论】：

【解决方案2】：

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

并且 codepen 不会验证它，因为 $blue 不是 CSS 属性而是 SCSS.. 所以请删除 $blue 变量并尝试使用静态值，codepen 将正确呈现它，如下所示：

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

【讨论】：

效果很好！非常感谢！
如果这有助于解决您的问题，请不要忘记将答案标记为已接受。谢谢