1

我正在用 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 类，然后在该类上设置边距，从而消除了问题！

4

2 回答 2

0

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

.gallery a { margin: 0; padding: 0; }
img {
  display: inline-block;
  width: 150px;
  height: 100px;
}
于 2013-05-27T23:11:43.850 回答
0

将样式添加到 a 标签：

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

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

于 2013-05-27T23:11:57.883 回答