如何在它们之间创建空间？

Question

我尝试做一个页脚菜单，就像这个网站：pentlandfirth.com/de。当我将鼠标悬停在链接上时，它有一个背景，但它位于边框的边界上。我怎样才能让他们之间的空间？ https://jsfiddle.net/13w3rmat/3/

#fa{ 
    width: 600px; 
    padding: 20px; 
    display: inline-block; 
} 

#fa ul{ 
    list-style-type: none; 
} 

#fa ul li{ 
    float: left; 
    width: 20%; 
    margin-right: 2%; 
    padding-left: 3%; 
    border-right: 1px solid #989; 
} 

#fa ul li:last-child{ 
    border: none; 
    margin: 0; 
} 

#fa ul li a{ 
    text-decoration: none; 
    display: block; 
    padding-bottom: 10px; 
    color: #000; 
} 

    #fa ul li a:hover{ 
    color: #f00; 
    background: gray; 
    border-radius:5px; 
    padding-right: 13px 

}

   <div id="fa"> 
    <ul> 
    <li> 
     <a href="#">Test</a> 
     <a href="#">Test</a> 
     <a href="#">Test</a> 
    </li> 
    <li> 
     <a href="#">Test</a> 
     <a href="#">Test</a> 
     <a href="#">Test</a> 
    </li> 
    <li> 
     <a href="#">Test</a> 
     <a href="#">Test</a> 
     <a href="#">Test</a> 
    </li> 
    </ul> 

</div> 

Answer 1

这里是一个demo.

在a标签添加少许padding：

a { 
    padding: 10px; 
} 

但最好给a在类的上方，并将填充添加到该类。

Answer 2

只需在您的#fa ul li a{ css中将padding-bottom: 10px;更改为padding: 5px;即可。

#fa ul li a{ 
    text-decoration: none; 
    display: block; 
    padding: 5px; //Here 
    color: #000; 
} 

Working Fiddle

Answer 3

在a标记添加margin & padding

#fa{ 
    width: 600px; 
    padding: 20px; 
    display: inline-block; 
} 

#fa ul{ 
    list-style-type: none; 
} 

#fa ul li{ 
    float: left; 
    width: 20%; 
    margin-right: 2%; 
    padding-left: 3%; 
    border-right: 1px solid #989; 
} 

#fa ul li:last-child{ 
    border: none; 
    margin: 0; 
} 

#fa ul li a{ 
    text-decoration: none; 
    display: block; 
    padding: 10px; 
    color: #000; 
    margin-right:30px; 
} 

#fa ul li a:hover{ 
    color: #f00; 
    background: gray; 
    border-radius:5px; 
    padding-right: 13px 
} 

https://jsfiddle.net/13w3rmat/4/

Answer 4

#fa ul li a{ 
 
    text-decoration: none; 
 
    display: block; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; /*use padding to the left here */ 
 
    color: #000; 
 
} 
 

 
/* Alternatively 
 
================*/ 
 

 
#fa ul li a:hover{ 
 
    color: #f00; 
 
    background: gray; 
 
    border-radius:5px; 
 
    padding-right: 13px; /*this line is missing a semi colon in yours*/ 
 
    padding-left: 10px; /*use padding to the left here*/ 
 
}