html anchor overlaps thumbnail/создает белые полосы под изображениями

Question

Я создал неупорядоченный список с моими значками, отмеченными в нем. Теперь (как говорит Firebug) тег привязки перекрывает мои миниатюры, создавая белые полосы под моими изображениями. Это мой код до сих пор:

HTML:

<div class="wrapper"> 
     <ul class="masonry"> 
      <li class="item"> 
       <a class=lightbox" href="1.jpeg"> 
       <img alt="1.jpeg" src="thumb/1.jpeg"> 
       </a> 
      </li> 
     </ul> 
    </div> 

CSS:

.wrapper{ 
    width:90%; 
    margin: auto; 
    padding: 20px; 
} 
.masonry { 
    column-count: 4; 
    -moz-column-count: 4; 
    column-gap: 0.5em; 
    -moz-column-gap: 0.5em; 
    -webkit-column-gap: 0.5em; 

} 
.item{ 
    background: #eee; 
    display: inline-block; 
    width: 100%; 
    margin: 0 0 0.5em 
    box-sizing: border-box; 
    moz-box-sizing: border-box; 
    webkit-box-sizing: border-box; 

} 
.item a{ 
    margin: 0; 

} 
.item img{ 
    width: 100%; 
    margin: 0; 

} 

Example

Вы можете увидеть, что проблема жить на my homepage

Answer 1

установить display: block на .item img

см this answer

Answer 2

Добавить line-height: 0; в .item img.

Белая полоса получается из пространства для десенберров букв - изображение помещается в исходное положение, это пространство остается доступным, но line-height: 0; заставляет его исчезнуть.