html - 常见的 CSS 错误：带有奇怪空间的 display-inline

Question

目前我有一些问题。

这是因为我想从浮动更改为display: inline-block;

我在这个预览中的结果

现在我注意到我上方这个奇怪的空间<nav>

如果您看不到奇怪的空间，请查看此预览。

当我使用浮动时，这个奇怪的空间是不可见的。但我反对浮动设计，我只想将浮动用于图像。

所以我的问题是：如何删除该空间？

如果有人知道治愈/修复;）谢谢！

Answer 1

内联流是相当棘手的事情。它有助于了解如何组合在一起以及它们如何影响它vertical-align。line-height在这种情况下，解决此问题的一种方法是使用vertical-align: topon nav（如果您愿意，它比h1—apply to both 更短）。

Answer 2

这是一个空格字符。因为内联块与块的工作方式相同，所以当它们之间有空格字符时，它们将具有可见的分隔符。

为了更容易理解，看这个例子：

<p>
This
words
will
have
a
space
between
them
</p>

因此，因为您将项目放在代码的不同行中：

<ul>
    <li><a title="home" href="/">home</a></li>
    <li><a title="login" href="/login">login</a></li>
</ul>

...浏览器正在添加空间来代替新行。你几乎没有办法修复它。

将它们放在一行上：

<ul>
    <li><a title="home" href="/">home</a></li><li><a title="login" href="/login">login</a></li>
</ul>

或者font-size: 0;在 ul 上设置，然后在 li 上设置正常字体大小。这样 li 之间的空间将等于 0。