html - <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 标签。不管怎样，图像以某种方式得到了特殊处理，它们的默认显示非常类似于内联 block 元素。