gpt4 book ai didi

javascript - HTML 中插入了意外的空白元素

转载 作者:太空宇宙 更新时间:2023-11-04 06:02:14 24 4
gpt4 key购买 nike

我有一个包含一堆图像的页面,每个图像都有自动生成的超链接到它们自己的个人图像页面;当您单击图像时,它会将您带到一个页面以单独查看图像。我遇到的问题是,在生成图像查看页面时,我最上面的主体元素没有触及屏幕顶部,因为存在意外的空白区域,这在检查元素屏幕中是可检测到的。

enter image description here

我已经多次重新格式化页面,但空白仍然存在。我不确定这是否是我使用 python/flask 呈现页面并传入变量这一事实的问题。

    <!DOCTYPE html>
<html>
<head>

<title>Image {{imageNumber}}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/styleSheet.css') }}">

</head>

<body>
<h1 class="titleText">Thermal Imaging</h1>
<a href="/static/images/{{imageNumber}}.jpg" download>
<img class="bigImg" src="/static/images/{{imageNumber}}.jpg">
</a>
</body>
</html>

我希望看起来不存在的空白区域。没有出现错误消息,但在检查器中我可以看到(并暂时删除)导致问题的空白:它被标记为 ​

最佳答案

浏览器具有内置样式表,可将默认边距和/或填充应用到 body。此外,h1 元素也有内置边距。您可以使用 CSS 规则调整/删除它们。

下面是一个示例,它从 body 和第一个 h1 元素中删除了上边距,从而使 body 中的第一项成为放置在页面的最顶部:

body, .noTopMargin { margin-top:0; }
<h1 class="noTopMargin">I have no top margin</h1>
<h1>I have a top margin</h1>

关于javascript - HTML 中插入了意外的空白元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57186122/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com