How do I remove this/these gap between those images?

Question

The issue here is that there is a gap between those images and I want to remove it. Here are the css and html codes.

HTML

<div id="acts">
    <div class="acts">
    <ul>
        <li><a href="#"><img src="img/example.png"/></a></li>
        <li><a href="#"><img src="img/example.png"/></a></li>
        <li><a href="#"><img src="img/example.png"/></a></li>
        <li><a href="#"><img src="img/example.png"/></a></li>
        <li><a href="#"><img src="img/example.png"/></a></li>
        <li><a href="#"><img src="img/example.png"/></a></li>
    </ul>
    </div>
</div>

CSS

    a {
        text-decoration-line: none;
    }
    #acts {
        width: 100%;
        height:100%;
        position: absolute;
        display:none;
        top:50px;
    }
    .acts li img {
        width: 100%;
        height:auto;

    }
    .acts li {
        position: relative;
        float: left;
        width: 20%;
    }
    .acts ul{
        list-style: none;
    }

Try using img { float: left; } in your css. Source: http://stackoverflow.com/questions/7641678/use-css-to-remove-the-space-between-images — Mike.Chun, Jan 09 '17 at 16:23
Can you tell us what your overall goal is? Your bottom-gap, while quite simple to fix, is the culmination of a bizarre layout style. Your use of `position: absolute;` is removing all height from your container elements, your `` tags are not properly containing your images, you're using a list but then doing everything you can to make it *not* a list... what you have here will cause you nothing but headaches moving forward. If you give us a more general idea of what you're going for, we can give you a better way. — Tyler Roper, Jan 09 '17 at 16:25
Hard to tell exactly from looking at an image. Might be as simple as removing some default padding/margin set by the browser. I started a fiddle for you. Try to see if you can reproduce it here. https://jsfiddle.net/ykjpm4j8/. Also maybe take a look at this question.. http://stackoverflow.com/questions/3485720/which-html5-reset-css-do-you-use-and-why for more info on CSS resets. — khollenbeck, Jan 09 '17 at 16:26
It seems the `li` height pushes. Applying a `line-height` less than the `font-size` fixes that. However, while setting the `line-height: 11px` (or less, depending on your `font-size`) to the `li` or `body` works my css not good enough to know how those hang together and if that breaks other things. - See this [**Plunkr**](https://plnkr.co/edit/PDznCvOcMSKL2rBfAsg2?p=preview) where I played with it - p.s: when `font-size: 14px` setting `line-height: 9px` or `height: 34px` both worked...no clue why though :) — Nope, Jan 09 '17 at 16:52
@Mike.Chun well that was easy to fix and also fast, thanks :) — Vu Minh Le, Jan 09 '17 at 16:57

How do I remove this/these gap between those images?

0 Answers0