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

我正在尝试在 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>

CSS：

$blue: #a3d5d3;

body {

background-color: $blue;

}

img{

display:block;

margin:auto;

line-height: 0;

max-width:50%;

}

慕工程0101907

浏览 89回答 2

2回答

BIG阳

body上面有一个边距。如果我进入检查器，我可以应用margin-top: 0到 body 元素，这样就消失了。在你的 CSS 中尝试一下，祈祷它能工作。此外，正如 Ron 指出的，您使用的是 SASS 变量而不是 CSS 变量。:root { --blue: #a3d5d3;}body { background-color: var(--blue); margin-top: 0;}

ITMISS

margin:0;仅将或添加margin-top: 0;到body{}CSS 部分，而不是图像本身。codepen 不会验证它，因为 $blue 不是 CSS 属性，而是 SCSS .. 所以请删除 $blue 变量并尝试使用静态值，codepen 将正确渲染它，如下所示：body {  background-color: #a3d5d3;  margin-top: 0;}

随时随地看视频慕课网APP