CODEWITHSUNDEEP
htmlcss
Stefan Schouten
Stefan Schouten

Reputation: 349

Element aligned below bottom = 0px

I'm trying to create a card with an image and some text at its bottom.

<div href="#" class="card">
    <img src="http://placehold.it/180x150">
    <span>Events</span>
</div>

The css is currently as follows.

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;
    }

The problem I have is that the span is aligned a few pixels below the actual image, as can be seen in http://jsfiddle.net/fe7Luaa6/ . What am I doing wrong?

Upvotes: 0

Views: 48

Answers (1)

Jonathan Lam
Jonathan Lam

Reputation: 17361

As you can see by this example, the div.card is a little taller than 150px (the height of the image).

If you explicitly set the height of the <div> to the height of the image like in this example, this will be solved.

Actually, an easier way (as suggested by this SO answer), says that this is because the <img> is, by default, an inline-block element and this causes the height of the container <div> to be calculated a little differently.

Adding a simple img { display: block; } will be an easier way to solve this, as shown in this example.

Upvotes: 2

Related Questions