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

时间:2017-08-31 19:08:00

标签: html css

I think a screenshot describes the issue the best:

padding problem

正如你所看到的,填充&#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,它没有任何区别。

1 个答案:

答案 0 :(得分:3)

内联元素忽略垂直填充 解决方案:将它们转换为//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;
}

相关问题