填充溢出<a>

Question

我覺得截圖能說明問題的最好：

正如你所看到的，墊襯「合併」到對方，但只有垂直。水平填充如預期的那樣（即在開始和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 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>