爲什麼李比一個子標籤

Question

我不知道爲什麼李標籤1px的身高超過了一個標記代碼更高如下 小提琴http://jsfiddle.net/9Wy8z/

#nav { 
width: 100%; 
background-color: #5A9AFF; 
} 

#nav > #nav_container > ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#nav > #nav_container > ul > li { 
    display: inline-block; 
    padding: 10px 0; 
} 

#nav > #nav_container > ul > li > a { 
    padding: 10px; 
    text-decoration: none; 
    color: #1b1b1b; 
} 

#nav > #nav_container > ul > li > a:hover { 
    background-color: #e0e0e0; 
} 


<div id="nav"> 
     <div id="nav_container"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Home</a></li> 
      </ul> 
     </div> 
    </div> 

這導致了一個標籤爲38px和李39px，我不確定這是爲什麼？

Answer 1

這是因爲a元素默認爲inline。這就是爲什麼你必須添加填充到li元素; li正在取其內容的高度，即inline（它不包括填充）。這種方法的問題是li元素也有一些固有的填充，它不等於你給a元素的填充。

的a標籤設置爲display:block;以及除去li填充將由block而不是inline顯示a元素解決了這個問題，並導致li只取a元素的大小（而不是更多）減去你試圖補充的任何強制填充。

JSFiddle

#nav > #nav_container > ul > li { 
    display: inline-block; 
} 

#nav > #nav_container > ul > li > a { 
    padding: 10px; 
    text-decoration: none; 
    color: #1b1b1b; 
    display: block; 
}