如何摆脱隐藏空间HTML/CSS

Question

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

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

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

html:http://pastebin.com/micJCBq1css：http://pastebin.com/WW9i52qc

对布局和良好实践的建议也非常感谢。

Answer 1

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

请使用以下css：

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