CODEWITHSUNDEEP
htmlcssposition
Laplace
Laplace

Reputation: 174

Element not fully aligned with bottom; Slightly lower than bottom edge

When using absolute positioning on an element within a div with a relative position rule, the element is slightly lower than the bottom of the parent div. Why does this happen? How would I solve this? I realize I can just mod the bottom value on .hoverAction, but that seems more like a workaround than an actual fix.

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/

Upvotes: 0

Views: 54

Answers (1)

Romain Braun
Romain Braun

Reputation: 3684

Add vertical-align: top; top your img

#avatar {
    vertical-align: top;
}

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

or set your image to display: block (Thanks @Justin Breiland for noticing)

Upvotes: 2

Related Questions