html - anchor 元素 <a> 的填充溢出

Question

我认为截图最能说明问题:

如您所见，填充相互“合并”，但仅限于垂直方向。水平填充符合预期(即在 Start 和 Leistungen 之间)。为什么标题 Physiotherapie、中间行 (Start Leistungen Kon) 和 Impressum 之间没有更多空间？

header #title {
  display: inline-block;
  padding: 0.5rem;
  margin-right: 1rem;
  font-size: 2rem;
}

header nav {
  display: inline-block;
}

header nav a {
  padding: 0.5rem;
  font-size: 1.25rem;
}

<header>
  <a id="title" href="index.html">Physiotherapie</a>
  <nav>
    <a href="index.html">Start</a>
    <a href="">Leistungen</a>
    <a href="">Kontakt</a>
    <a href="">Anfahrt</a>
    <a href="">Impressum</a>
  </nav>
</header>

P.S.:我使用默认的框大小调整(内容框)，但如果我使用边框框，也没有区别。

Answer 1

内联元素的垂直填充被忽略。
解决办法:把它们变成inline-block，然后padding才会有效果。

header #title {
    display: inline-block;
    padding: 0.5rem;
    margin-right: 1rem;
    font-size: 2rem;
}

header nav {
    display: inline-block;
}

header nav a {
    display:inline-block; /* added */
    padding: 0.5rem;
    font-size: 1.25rem;
}

<header>
    <a id="title" href="index.html">Physiotherapie</a>
    <nav>
        <a href="index.html">Start</a>
        <a href="">Leistungen</a>
        <a href="">Kontakt</a>
        <a href="">Anfahrt</a>
        <a href="">Impressum</a>
    </nav>
</header>