CSS/HTML：图片库缩略图小于超链接答案

【问题标题】：CSS/HTML: Photo Gallery Thumbnails Smaller than HyperlinkCSS/HTML：图片库缩略图小于超链接
【发布时间】：2013-05-28 09:16:30
【问题描述】：

我正在用 HTML 创建一个照片库，并使用 CSS 在缩略图之间添加空间。我遇到的问题是，当我点击缩略图时，“a”标签超链接挂在图像的下方、上方或侧面，具体取决于边距或填充。我怎样才能摆脱这种情况并让超链接只停留在缩略图的范围内？

HTML

<html>
  <head>
    <title>Photo Gallery</title>
  </head>
  <body>
    <div class="gallery">
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
    </div>      
  </body>
</html>

CSS

body {
  margin: 0 auto;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 0;
  width: 960px;
}

img {
  display: inline-block;
  margin: 15px;
  width: 150px;
  height: 100px;
}

谢谢大家。我最终将每个图像放入一个 Div 类，然后在该类上设置边距，从而消除了问题！

【问题讨论】：

将您的 img 设置为 display:block; 而不是 inline-block。（如果不能解决问题，请设置一个小提琴）

标签： html css

【解决方案1】：

将样式添加到 a 标签：

display:inline-block;
font-size:1px;

请看这里：http://jsfiddle.net/XRhWe/ 左起第二个对象。

【讨论】：

【解决方案2】：

您可以删除a 的填充，并将图像的边距移动到a。由于a 包裹了图像，并且图像有边距，所以a 也被包裹在边距中。如果你真的想要a 块上的边距，那么点击它什么都不做：

.gallery a { margin: 0; padding: 0; }
img {
  display: inline-block;
  width: 150px;
  height: 100px;
}

【讨论】：