元素未完全與底部對齊； 略低於底邊

Question

在具有相對位置規則的div內的元素上使用絕對定位時，該元素略低於父div的底部。 為什么會這樣？ 我該如何解決？ 我意識到我可以修改.hoverAction的最低值，但這似乎更像是一種解決方法，而不是實際的解決方法。

 function showFileUploadDialog() { //do stuff } 

 #avatarContainer { display: inline-block; position: relative; } .hoverAction { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.65); color: white; display: block; width: calc(100% - 12px); padding: 6px; } #avatar { width: 200px; height: 180px; background-size: cover; background-position: center; border-radius: 1px; background-color: #eeeeee; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46); display: inline-block; } 

 <div id="avatarContainer"> <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> <a class="hoverAction" href="#" onclick="showFileUploadDialog(); return false;">Update Avatar</a> </div> 

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

Answer 1

添加vertical-align: top; 頂你的img

#avatar {
    vertical-align: top;
}

http://jsfiddle.net/pcwhmft6/2/

或將圖像設置為display: block （感謝@Justin Breiland引起注意）