html - 链接与子元素的高度不同

Question

我有一个包含 2 个子元素的元素，一个是文本容器，另一个是图像。元素后有一个空格。我使用了 inspect element 并且空格属于链接，但对我来说 ii 没有意义。我是 Web 开发的新手，所以请不要对我太苛刻。

jsfiddle:https://jsfiddle.net/semfa64e/ 这是移动设备优先的设计，因此您可能应该缩小结果窗口。

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

Answer 1

在你的<a>里面有一些空白(空格)，空白有一个 4px chrome 中的高度和宽度...

那么是什么导致了这个问题呢？
<img>叫做replaced element ，它将被数据(二进制)替换，因此它基本上表现得像文本并让 block 具有额外的高度。 https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

1. 添加vertical-align: middle;至 <img>

2. 添加display: block;至 <img>

3. 添加display: flex;至 <a>

引用:

1. https://css-tricks.com/fighting-the-space-between-inline-block-elements/
2. HTML 5 strange img always adds 3px margin at bottom