如何摆脱隐藏空间 HTML/CSS [关闭]

Question

作为练习的一部分，我使用 HTML 和 CSS 构建了一个网站。然而，我偶然发现了一些我需要摆脱的奇怪空间。检查网页，我的图像上方似乎显示了额外的空白内容。这发生在我添加导航箭头之后。

如果有人对如何处理这种情况有任何建议，我会很高兴。

网址如下：http://folk.ntnu.no/nikolahe/gloshaugen/gloshaugen.html

html：http://pastebin.com/micJCBq1 css：http://pastebin.com/WW9i52qc

我们也非常感谢有关布局和良好做法的建议。

Answer 1

发生这种情况是因为您在 #previous 和 #next 元素上使用了 position:relative。像这样，它们被重新定位，但仍然占用了它们原来占用的空间。

请改用以下 css：

.block-wapper {
    position:relative;
    ...
}
#previous {
    position: absolute;
    left: 10px;
    ...
}
#next {
    position: absolute;
    right: 10px;
    ...
}