職位：絕對;底部：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

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

您需要設置vertical-align屬性（上，中，不管）你img

Answer 2

display: block;爲img應該做的伎倆： LINK