I have organized my thumbnails in an unordered list, but I'm encountering an issue where the anchor tag seems to overlap them, creating white stripes underneath. Below is the code I am currently using:
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;
}
You can observe the issue on my website