如何增加上邊距？ （ul li）

Question

我有一個「ul」列表，我希望在「li」上有一個邊框頂部，但我不希望頂部邊框和文本之間的默認距離，我需要更多的距離。

不幸的是，我不明白的方式來完成這項工作，邊框間距應該工作，但它沒有，只是afect左右..

border-spacing: 10px; 

#links { 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
\t font-size: 14px; 
 
\t color: #98af85; 
 
\t margin-left:-38px; 
 
\t padding-top:4px; 
 
} 
 
#links ul{ 
 
\t list-style: none; \t 
 
} 
 
#links ul li { 
 
\t padding: 0px 47px 0px 0px; 
 
\t white-space:nowrap; 
 
\t display: inline-table; 
 
\t border-spacing: 10px; 
 
} 
 
#links ul li a { 
 
\t font-size: 14px; 
 
\t color: #98af85; 
 
\t text-decoration: none; 
 
} 
 
#links ul li a:hover { 
 
\t color: #3b8686; 
 
\t cursor: pointer; 
 
\t text-decoration: none; 
 
\t border-top: 9px solid #b8dc7c; 
 
}

<div id="links"> 
 
    
 
<ul> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li>  
 
</ul> 
 
    
 
</div>

Answer 1

你可以簡單使用padding-top：

#links { 
 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    font-size: 14px; 
 
    color: #98af85; 
 
    margin-left:-38px; 
 
    padding-top:4px; 
 
} 
 
#links ul { 
 
    list-style: none; 
 
} 
 
#links ul li { 
 
    padding: 0px 47px 0px 0px; 
 
    white-space:nowrap; 
 
    display: inline-table; 
 
    border-spacing: 10px; 
 
} 
 
#links ul li a { 
 
    font-size: 14px; 
 
    color: #98af85; 
 
    text-decoration: none; 
 
} 
 
#links ul li a:hover { 
 
    color: #3b8686; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    border-top: 9px solid #b8dc7c; 
 
    padding-top: 10px;/*Add padding-top*/ 
 
}

<div id="links"> 
 
    
 
<ul> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li>  
 
</ul> 
 
    
 
</div>