底部對齊在底部下方的元素= 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所示。