位置：绝对;底部：0;创造几个像素的差距

Question

一个例子比单词更好：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

display: block;的{​​{1}}应该可以解决问题：{p> img LINK

Answer 2

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

您需要将vertical-align属性（顶部，中间，等等）设置为img