Question

Why is that <a> tag gets height in below example jsfiddle

我想这就是为什么我在功能课上的余量不能按预期工作的原因。

代码示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

.feature img {
  display: block;  
}

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

<a> tag gets height - why is that?

1 个答案: