填充溢出<a>

我觉得截图能说明问题的最好：填充溢出<a>

正如你所看到的，垫衬“合并”到对方，但只有垂直。水平填充如预期的那样（即在开始和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：我使用的是默认的箱上浆（内容框），而且如果我使用边界盒，它没有什么区别。

来源

2017-08-31 Vega180

行内元素忽略垂直填充。
解决方案：将它们变成inline-block s，那么填充将起作用。

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>

来源

2017-08-31 19:12:26

填充溢出<a>

回答

相关问题