title: Image has a big margin-left that was not set
body: <p>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. </p>
  
  <p>The margin is 0 (declared multiple times as <code>margin: 0</code>) and, using Firebug (Firefox debug tool) it says the images have a 142px left margin.</p>
  
  <p>The code is as follows (shortened, of course):</p>
  
  <pre><code>&lt;div id=""&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="" /&gt;&lt;img class="bloom" src="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="" /&gt;&lt;img class="bloom" src="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="" /&gt;&lt;img class="bloom" src="" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code># {
      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;
  }
  </code></pre>
  
  <p>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: <a href="http://ranierialthoff.com.br/elite/" rel="nofollow">http://ranierialthoff.com.br/elite/</a> the images just before the footer.</p>