如何在它們之間創建空間？

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*/ 
 
}