1

I have created an unordered list with my thumbnails tagged in it. Now (as Firebug tells me) the anchor tag is overlapping my thumbnails creating white stripes under my images. This is my code so far:

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

You can see the problem live on my homepage

Till
  • 43
  • 5
  • Hi and welcome to SO. FYI, your page also looks very different under chrome. You might use both firefox and chrome to triangulate the problem... – rrauenza May 24 '16 at 23:44

2 Answers2

1

set display: block on .item img

see this answer

Community
  • 1
  • 1
ray
  • 26,557
  • 5
  • 28
  • 27
0

Add line-height: 0; to .item img.

The white strip results from the space for the descenders of letters - the image is put on the baseline, that space is left available, but line-height: 0; makes it disappear.

Johannes
  • 64,305
  • 18
  • 73
  • 130