html - 位置 : absolute; bottom: 0; create a few pixels gap

Question

例子胜于 Eloquent :http://jsfiddle.net/k8p3E/2/

HTML:

    <div class="captionImage">
        <a href="">
            <img src="">
            <p>voodoo</p>
        </a>
    </div>

SCSS:

.captionImage {
  position: relative;
  width: 500px;
  a {
    color: white;
    img {
      border-radius: 5px 5px 0 0;
      width: 100%;
      height: 200px;
      background-color: blue;
    }
    p {
      position: absolute;
      bottom: 0; /* voodoo */
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: rgba(65,53,40,0.9);
      text-align: center;
      text-transform: uppercase;
    }
  }
}

如您所见，p 从底部开始:-5px 而不是 0。

我很长一段时间以来一直被这个问题困扰着，我正在寻求你的帮助。

谢谢。

编辑:我试图将图像底部的段落与 0.9 不透明度对齐，这就是为什么我不希望它位于图像下方。

Answer 1

http://jsfiddle.net/k8p3E/4/

您需要为您的 img 设置 vertical-align 属性(顶部、中间等)