Link is not the same height as child elements

Question

I have an item which has 2 child elements, one is a container for text and the other one is an image. After the item there is a blank space. I used inspect element and that spaces belongs to the link, but to me ii doesn't make sense. I am new to web development so please don't be hard on me.

jsfiddle: https://jsfiddle.net/semfa64e/ This is a mobile first design so you should probably make the result window smaller.

HTML:

<div class="item">
    <a href="#">
        <div class="item-content">
            <h3>Item title</h3>
            <p>Item description lorem ipsum dolor sit amet contrectetur</p>
        </div>
        <img src="http://lorempixel.com/200/300" alt="img" />
    </a>
</div>

<div class="item">
    <a href="#">
        <div class="item-content">
            <h3>Item title</h3>
            <p>Item description lorem ipsum dolor sit amet contrectetur</p>
        </div>
        <img src="http://lorempixel.com/200/300" alt="img" />
    </a>
</div>

CSS:

.item {
    width: 100%;
    height: auto;
}

.item-content {
    position: absolute;
    text-align: center;
    color: #fff;
    width: 80%;
    margin-top: 90%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .2s ease-in-out;
}

a:hover .item-content {
    opacity: 1;
    margin-top: 20%;
    background-color: rgba(24, 24, 24, .7);
}

img {
    width: 100%;
    height: auto;
}

`` is a `inline` element so ... add `display: block;` to `` to change its default setting — twxia, Jun 04 '16 at 15:28
so the small white space between the pictures? Do you want two of the same pictures and you're concerned about the white space in between them? Or the space in between the semi transparent divs? — DMort, Jun 04 '16 at 15:51
The space between 2 pictures. i.e. The space below the picture. — , Jun 04 '16 at 15:53
@LeonLaci I update a answer about why cause this problem :D you can have a check — twxia, Jun 04 '16 at 16:11

score 1 · Accepted Answer · edited Jul 21 '17 at 20:12

In your <a> there's some blank (space) inside it and a blank has a 4px height and width in chrome...

So what causes this problem?
<img> is called replaced element, it'll be replaced by the data (binary) so it basically behaves like a text and lets the block have extra height. https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

Add vertical-align: middle; to <img>
Add display: block; to <img>
Add display: flex; to <a>

reference:

Add `vertical-align: middle;` to `` Thanks although i had a somewhat different problem but this suggestion seemed to put me on the right path. — oomer, Mar 07 '23 at 09:05

score 0 · Answer 2 · answered Jun 04 '16 at 15:54

0

add display: block; to your img-tag

answered Jun 04 '16 at 15:54

Alex

56
4

score 0 · Answer 3 · answered Jun 04 '16 at 15:58

0

It is not about <a> tag it's about <img> tag. You need to add img { max-width: 100%; display: block; } for responsiveness.

answered Jun 04 '16 at 15:58

Goktug Gumus

129
4

Link is not the same height as child elements

3 Answers3