Css 我怎样才能消除绝对定位内容下面的空白？

我正在尝试在一个水平排列的无序列表中，将一些大小可变的链接图像底部对齐。下面是我的HTML+CSS，在很大程度上实现了这个技巧。只有一个小问题：图像下方的间隙（）。正如你所看到的，我使用绝对定位来让图像粘到底部。但是，即使使用

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>

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;
}

添加以下代码

img {
    vertical-align:bottom;
}

添加以下代码

img {
    vertical-align:bottom;
}

---

简单的解决方案似乎总是让我摸不着头脑！掌心。谢谢！这些简单的解决方案似乎总是让我摸不着头脑！掌心。谢谢！