Question

我正在为我正在创建的网站的照片页面工作，但似乎链接正在延伸到图片下方的空白区域。当我删除周围的<section>时问题就消失了，但我不知道为什么。

这里有Jsfiddle更好地展示我的代码和问题

＆＃13;

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

＆＃13;

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

＆＃13;

我在问题区域添加了border。非常感谢任何帮助！

Answer 1

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

按a制作display:block块级元素，并在图片周围显示border
将display:block设置为img以删除因内联元素而导致的空白。 （其他解决方案是设置vertical-align-bottom，默认情况下img为vertical-align:baseline）

注意：我为img max-width:100%提供了响应，如果您将border提供给img而不是{{} 1}}，a a不再是必需的，尽管拥有它是好事。

在w3

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

＆＃13;

display:block

＆＃13;

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

＆＃13;

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

1 个答案: