Bootstrap IMG Gallery中图像周围的空白

Question

http://seattleasce.org/images/test_gallery/ymf_history.php

I'm working on this site and have been trying to remove the extra white space between images. I'm using bootstrap and the bootstrap image gallery libraries, and can't seem to figure out how to fix this. Any help would be really appreciated!

Answer 1

the problem is a elements are inherently inline-block which has a natural padding of about 1 or 2px. There are some hacks to remove the spacing but it's better practice to use float: left instead. Just be sure to clear your floats or add overflow: hidden to their parent.

EX:

 /*CSS*/ .SomeClassName{ display: block; float: left; } 

 <!--HTML--> <a href=" /images/test_gallery/IMG_0422.JPG " data-gallery="" class="SomeClassName"> <img width="100px" src=" /images/test_gallery/resize/IMG_0422.JPG "> </a>