Image has a big margin-left that was not set

Question

I'm trying to create a list with images, side by side, each one has its link and an effect on hover. Everything works fine, except the images create a 142px left margin out of somewhere.

The margin is 0 (declared multiple times as margin: 0) and, using Firebug (Firefox debug tool) it says the images have a 142px left margin.

The code is as follows (shortened, of course):

<div id="">
    <ul>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
    </ul>
</div>

And the css:

# {
    height: 185px;
    padding: 16px 0px;
    position: relative;
    width: 100%;
}

# ul {
    list-style: none;
    width: 951px;
}

# li {
    background: black; /*just to verify if the margin was on the LI or IMG*/
    float: left;
    height: 185px;
    margin: 0 16px;
    width: 285px;
}

# img {
    position: absolute;
}

# img.bloom {
    display: none;
    z-index: 1;
}

The "bloom" image is part of the hover effect. As you can see, NOWHERE was "margin left" set, neither here nor anywhere in the css. You can see it in the link: http://ranierialthoff.com.br/elite/ the images just before the footer.

Answer 1

I see text-align:center in your #unidades li element. It will make img center.

You can change it to left to fix your problem.

If you want to centralize them. Just remove position:absolute in #unidades img and keep text-align:center still.

Answer 2

It's not a left margin, it's the position of the image. Your problem is that you are absolutely positioning the images without telling the browser where to put them. You need to add top: 0; left: 0; or similar to your #unidades img styles.