html - 如何摆脱隐藏空间 HTML/CSS

Question

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

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

该网站如下： http: //folk.ntnu.no/nikolahe/glossaugen/glossaugen.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;
    ...
}