如何增加上边距？ （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>