HTML中插入了意外的空格元素
HTML中插入了意外的空格元素
提问于 2019-07-24 23:11:10
我有一个包含一堆图像的页面，每个图像都有自动生成的指向其个人图像页面的超链接；当您单击一个图像时，它会将您带到一个页面，让您自行查看该图像。我遇到的问题是，在生成图像查看页面时，我最上面的body元素没有接触到屏幕的顶部，因为有意外的空白，这在inspect-element屏幕中是可以检测到的。
我对页面进行了多次重新格式化，但仍然保留空白。我不确定这是否是一个问题，因为我使用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>
我期望出现看起来不存在的空白。没有出现错误消息，但在检查器中我可以看到(并临时删除)导致问题的空白区域:它被标记为
回答 2
Stack Overflow用户
发布于 2019-07-24 23:18:38
浏览器具有内置的样式表，这些样式表对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>
Stack Overflow用户
发布于 2019-07-25 00:26:40
好吧，对我来说，解决方案是:我摆弄HTML，重新格式化它，删除空格。我一定是在某个时候删除了零宽度空格字符，现在它可以正常工作了。我建议，如果你有类似的问题，尝试删除，复制，粘贴，重新格式化等你的html，直到它的工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57186122
复制相关文章
相似问题
腾讯云开发者
