如何摆脱导航栏和图片之间的空间？

Question

我无法弄清楚如何从导航栏和图片中移除此空间..

我对导航栏和图像的CSS代码是：

keyword

a { text-decoration: none; color: white; padding-right: 5px; padding-left: 5px; padding-top: 0; } a:hover { color: black; } header { background-color: #C0C0C0; margin: 3px 60px 0; } li { display: inline; border-right: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid black; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } nav { position: relative; text-align: center; } ul { list-style-type: none; } #bikebanner { position: relative; left: 65px; } 是图片ID。

html就是这样：

#bikebanner

寻找普遍适合，因为我还有其他东西，它们之间也有空白区域。

感谢。

Answer 1

尝试将此添加到您的css：

img{
 display:block;
}

img是inline-block类型，它增加了一些很难找到的空间。

将其设置为阻止应该修复它。

Answer 2

你正在谈论什么空间？

请记住，默认情况下，h1周围有空格

Answer 3

这最初导致很多人疯狂并且解决方案并不明显，但由于img或ul上继承或设置的字体大小，图像，列表和列表项最终会出现这样的小空间。 img。如果您不执行任何操作，则ul和clearfix会继承正文字体大小（通常为14px - 16px），并导致此0.25rem（或3.5px - 4px）空间问题。

导航项目

有两种流行的解决方案：

1. 将您的列表项浮动，并确保向ul或其容器添加ul，或
2. 我的首选解决方案：将li上的字体大小设置为0，然后将ul { font-size: 0; list-style: none; margin: 0; padding: 0; } li { display: inline-block; font-size: 1rem; } 上的字体大小设置为1rem（或其他）。

所以我的CSS看起来像这样：

display: block

图片

如果将图像设置为display: block;，则会占用图像下方的空间。这也有它自己的警告。例如，如果您在将其切换为auto后将其置于中心位置，则需要将边距设置为header img { display: block; margin: 0 auto; } 。像这样：

test.txt

Answer 4

默认情况下，每个h1-h6标签的上下都有一个边距。我想如果你在你的CSS中覆盖这个你有你想要的东西。

h1 {
  margin: 0;
  padding: 0;
}

看看这个jsfiddle https://jsfiddle.net/zn7wtdLp/

Answer 5

问题是display:inline。这会像文本一样处理元素，所以如果你有

<li>...</li>
<li>...</li>

您遇到了问题，因为换行符会占用空间。 尝试将列表元素放在这样：

<li>...</li><li>...</li>

有关其他解决方案，请参阅here