元素與底部不完全對齊;稍低於底部邊緣

當使用相對位置規則在div內的元素上使用絕對定位時，該元素略低於父div的底部。爲什麼會發生？我將如何解決這個問題？我意識到我可以修改.hoverAction的底部值，但這看起來更像是一種解決方法而不是實際的修復。元素與底部不完全對齊;稍低於底部邊緣

function showFileUploadDialog() { 
 
    //do stuff 
 
}

#avatarContainer \t { 
 
\t display: inline-block; 
 
\t position: relative; 
 
} 
 

 
.hoverAction \t { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t background: rgba(0, 0, 0, 0.65); 
 
\t color: white; 
 
\t display: block; 
 
\t width: calc(100% - 12px); 
 
\t padding: 6px; 
 
} 
 

 
#avatar \t { 
 
\t width: 200px; 
 
\t height: 180px; 
 
\t background-size: cover; 
 
    background-position: center; 
 
\t border-radius: 1px; 
 
\t background-color: #eeeeee; 
 
\t box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46); 
 
\t display: inline-block; 
 
}

<div id="avatarContainer"> 
 
\t <a class="popup-link" href="{{ anime.poster }}"><img id="avatar" style="background-image: url('http://www.herdofsquirrels.com/wp-content/uploads/2014/08/squirrel-nut-cute-animal-nature-grass-1920x1280.jpg');" /></a> 
 
\t <a class="hoverAction" href="#" onclick="showFileUploadDialog(); return false;">Update Avatar</a> 
 
</div>

http://jsfiddle.net/pcwhmft6/1/

來源

2015-01-14 Laplace