css - 絶対配置されたコンテンツの下のギャップを取り除くにはどうすればよいですか?

Question

水平に並べられた順序付けられていないリストで、サイズが可変のリンクされた画像を下に揃えようとしています。以下の私の HTML + CSS は、大部分のトリックを行います。画像の下のギャップ ( http://jsfiddle.net/ymSvr/ ) です。ご覧のとおり、絶対配置を使用して画像を下にくっつけています。しかしbottom: 0、画像があってもまだ底には行きません。

誰かがなぜこれが起こるのか説明できますか? どうすればこれを解決できますか？

マークアップ:

<ul>
  <li>
    <div class="outer">
      <div class="inner">
        <a href="javascrip:void(0)">
         <img src="http://lorempixel.com/output/animals-h-c-132-200-5.jpg" />
        </a>
      </div>
    </div>
  </li>
  <li>
    <div class="outer">
      <div class="inner">
        <a href="javascrip:void(0)">
         <img src="http://lorempixel.com/output/animals-h-c-132-165-4.jpg" />
        </a>
      </div>
    </div>
  </li>
  <li>
    <div class="outer">
      <div class="inner">
        <a href="javascrip:void(0)">
         <img src="http://lorempixel.com/output/animals-h-c-132-190-9.jpg" />
        </a>
      </div>
    </div>
  </li>
</ul>

CSS :

ul li { 
    display:inline-block;

}

.outer {
    background-color: #c0c0c0;
    display: block;
    height: 242px;
    position: relative;
    width: 200px;
}

.inner {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

Answer 1

次のコードを追加します

img {
    vertical-align:bottom;
}

http://jsfiddle.net/ymSvr/1/