html - 为什么我的图片链接在图片下方延伸？

Question

<分区>

Answer 1

因为a和img是行内元素，所以

• 通过display:block使a成为 block 级元素，border出现在图像周围
• 将 display:block 设置为 img 以删除由于作为内联元素而导致的下方空白。 (其他解决方案是设置 vertical-align-bottom，给定 img 默认情况下是 vertical-align:baseline)

注意:我给 img 一个 max-width:100% 来响应，如果你给 border 到 img 而不是 a，不再需要 display:block 的 a，虽然拥有它是件好事。

查看有关内联元素的更多信息 here在 w3 上

.photo {
  text-align: center;
  float: left;
  width: 70%;
  margin-left: 8%;
  margin-top: 5%;
  margin-bottom: 5%;
}
.photo a {
  display: block;
}
.photo img {
  display: block;
  border: 1px solid red;
  max-width: 100%;
  margin: 1%
}

<section class="photo">
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
</section>