HTML中占用额外空间的标签

Question

我在 a 标签中嵌入了一张图片。但是当我给图片和 a 标签添加边框时，a 标签会占用一些额外的空间，而不是紧贴着图片。如何让 a 标签不占用额外空间？下图中红线圈出的是 a 标签。

我的 HTML 代码：

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a>

Css：

img
{
    border:1px solid black;
}
a
{
    border:1px solid red;
}

http://jsfiddle.net/rEPXY/2/

- Anish

---

你的演示中唯一的HTML是：<D src="http://img165.imageshack.us/img165/1043/burnhr6.png"/>。我不确定该如何处理这个。 - thirtydot

你可以通过在CSS中将<a>和<img>标签向左浮动来改变这个问题，但我不确定这是否是你要寻找的。请参见：http://jsfiddle.net/rEPXY/9/ - Mike Lentini

但你仍然在图像下面得到一些额外的空间。为什么会发生这种情况？ - Anish

我更新了代码，现在图片也可以浮动了，问题已经解决。我会将其发布为答案。 - Mike Lentini

可能有帮助。 (http://www.welovecss.com/showthread.php?t=4132) - Rob Hruska

Answer 1

这是否是你正在寻找的东西？

a
{
    border:1px solid red; display:inline-block; line-height:0;
}

- ToddBFisher

Answer 2

根据这个图片将要在您的网站上放置的位置不同，您可以通过浮动<a>和<img>标签来修复它。请参见修改后的jsfiddle示例：

Html：

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a>

Css：

img {
    border:1px solid black;
    float: left;
}

a {
    border:1px solid red;
    float: left;
}

www.jsfiddle.net/rEPXY/9

- Mike Lentini

---

+1 好答案 Mike :) 已将您的解决方案添加到帖子中。 （为确保此帖子是独立的） - gideon

谢谢！它有效了，但它影响了其他我不想向左浮动的元素。不过我可以为那个元素添加一些ID或类。这需要时间。无论如何，感谢你的代码。 - Anish

Answer 3

实时示例：http://jsfiddle.net/rEPXY/18/

图像被视为内联元素，因此会遵循字体大小和行高以及换行符。更改图像及其容器的性质即可解决问题。下面是<a>标签的CSS，使用了inline-block，但您也可以将其更改为具有width属性的block。

如果您也将<a>标签浮动，那么将难以将其与其他元素对齐。

img
{
    border:1px solid black;float:left;
}
a
{
    border:1px solid red;display:inline-block;
}

- Matt Lo

Answer 4

根据这篇文章，您可以通过添加以下规则来解决它：

a img {vertical-align:bottom}

在你的jsfiddle中，这对我来说似乎有效。

- Rob Hruska

Answer 5

我不明白的是为什么你在a标签上加了一个边框。我猜测，当你添加边框时，浏览器会将a标签解释为一个包含内容的元素，因此它可能会分配默认的行高并调整宽度以适应标签内的内容。

- Baz1nga

---

我在原始代码中没有使用边框。我只是在这里使用它来提及额外的空间。 - Anish