圖標圖像導航CSS

Question

我有導航欄中的圖標圖像的一些問題，我試圖將這些圖標設置在除了每個標籤之外的正確位置。如果您發現網絡標籤對電腦顯示器圖標非常不合適，我會嘗試更改填充的頂部和底部，除了左側和右側，但不以此方式工作。

http://i58.tinypic.com/e5i7p4.jpg

<nav id="sideMenu" role="navigation"> 
<ul id="MainNav" class="nav-bar"> 
    <li><a class="icon" href="#web"><img src= "img/web.svg">Web</a></li> 
    <li><a class="icon" href="#articles"><img src= "img/articles.svg">Articles</a></li> 
    <li><a class="icon" href="#about"><img src= "img/about.svg">About</a></li> 
    <li><a class="icon" href="#contact"><img src= "img/contact.svg">Contact</a></li> 
</ul> 
</nav> 

.icon img { 
    height: 30px; 
    width: 30px; 
    padding-left: -0.2rem; 
    padding-right: 0.8rem; 
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
} 

的人嗎？

Answer 1

嘗試使用保證金。填充是用於文本。你可以試試這個 -

.icon img { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin: 3px 0px 0px -6px; 
 
}