<a> 标签获得高度 - 这是为什么？

Question

为什么<a>标签在下面的示例中得到高度 jsfiddle

我想这就是为什么我在要素类上的边距无法按预期工作的原因。

代码示例

.feature {
margin: 0;
position: relative;
margin: 10px 0;
}
.feature__caption {
position: absolute;
bottom: 5px;
color: #c158ad;
text-align: center;
width: 100%;
font-size: 1.5em;
padding: 2% 0;
right: 0;
left: 0;
}

<div class="col span_4_of_12">
<figure class="feature">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="shoes">
<figcaption class="feature__caption">ACCESSORIES</figcaption>
</a>
</figure>
<figure class="feature">
<a href="#">
<img src="http://via.placeholder.com/350x150" alt="shoes">
<figcaption class="feature__caption">LATEST FASHION</figcaption>
</a>
</figure>
</div>

Answer 1

不确定这是否是你想要的。试试吧。

.feature img {
display: block;  
}

浏览器在技术上使用 display： inline(如您在开发人员工具中看到的那样(，用于 img 标签。无论如何，图像以某种方式得到了特殊的处理，它们的默认显示非常类似于内联块元素的显示。