填充元素的填充溢出<a>

Question

I think a screenshot describes the issue the best:

正如你所看到的，填充＆＃34;合并＆＃34;相互进入，但只是垂直。水平填充符合预期（即开始和 Leistungen 之间）。为什么标题 Physiotherapie ，中间行（开始Leistungen Kon ）和 Impressum 之间没有更多空格？

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

P.S。：我使用默认的box-sizing（内容框），但是如果我使用border-box，它没有任何区别。

Answer 1

内联元素忽略垂直填充 解决方案：将它们转换为//usr/share/doc/gcc-6/README.Bugs s，然后填充将产生效果。

inline-block

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;
}