Маленькая коробка между списком изображений

Question

У меня проблема с моим сайтом. Я добавил несколько социальных кнопок для изображений в социальных сетях на свой сайт, и всегда появлялись те небольшие изменения, которые меняют цвета. Я не знаю, как это исправить.

У вас есть идеи?

Вот ссылка на изображение: http://i.imgur.com/HD9AqLv.png

HTML-фрагмент

<div class="social"> 
     <ul> 
      <li> <a href="#"> <img src="assets/Android.png" alt="Smiley face" height="42" width="42"> </a> </li> 
      <li> <a href="#"> <img src="assets/GitHub.png" alt="Smiley face" height="42" width="42"> </a> </li> 
      <li> <a href="#"> <img src="assets/GooglePlus.png" alt="Smiley face" height="42" width="42"> </a> </li> 
      <li> <a href="#"> <img src="assets/LinkedIn.png" alt="Smiley face" height="42" width="42"> </a> </li> 
      <li> <a href="#"> <img src="assets/Mail.png" alt="Smiley face" height="42" width="42"> </a> </li> 
      <li> <a href="#"> <img src="assets/Reddit.png" alt="Smiley face" height="42" width="42"> </a> </li> 
      <li> <a href="#"> <img src="assets/YouTube.png" alt="Smiley face" height="42" width="42"> </a> </li> 
     </ul> 

    </div> 

CSS-фрагмент

.social{ 
float: right; 
padding-top: 1.1rem; 
} 

.social ul{ 
list-style: none; 
display: inline; 
} 

.social li{ 
padding-left: 10px; 

display: inline; 
} 

В конце концов, я даже не думаю, что это имеет что-то связанное с этим кодом. Может быть, это просто общая ошибка.

Answer 1

Я думаю, что вы видите, что подчеркивание по умолчанию для анкеров. Добавление этого стиля css должно избавиться от таких:

.social li a{ 
    text-decoration: none; 
}