html - 元素在底部下方对齐 = 0px

Question

我正在尝试创建一张带有图像和底部文本的卡片。

<div href="#" class="card">
    <img src="http://placehold.it/180x150">
    <span>Events</span>
</div>

目前css如下。

div.card
{
    position: relative;
    display: inline-block;
}
    div.card span
    {
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 2;

        width: 100%;

        background-color: #000000;
        background-color: rgba(0, 0, 0, 0.5);

        color: #FFFFFF;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

我遇到的问题是跨度对齐实际图像下方几个像素，如 http://jsfiddle.net/fe7Luaa6/ 中所示。 .我做错了什么？

Answer 1

如你所见 this example , div.card比150px(图片的高度)高一点。

如果您显式设置 <div> 的高度到图像的高度，如 this example ，这将得到解决。

---

实际上，更简单的方法(如 this SO answer 所建议的那样)说这是因为 <img>默认情况下，是 inline-block元素，这会导致容器的高度 <div>计算方式略有不同。

添加一个简单的 img { display: block; }将是解决此问题的更简单方法，如 this example 所示。 .