Как увеличить верхнюю границу? (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

You может простое использование 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>