位置：绝对；底部：0；创建几个像素间隙答案

【问题标题】：position: absolute; bottom: 0; create a few pixels gap位置：绝对；底部：0；创建几个像素间隙
【发布时间】：2014-02-26 20:36:39
【问题描述】：

例子胜于言语：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 不透明度对齐，这就是为什么我不希望它在图像下方。

【问题讨论】：

不清楚你想做什么。

标签： html css sass

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

display: block; img 应该可以解决问题： LINK

【讨论】：