Javascript 在html中占用一些额外空间的标记

我在a标签里放了一张图片。但当我给图像加上边框和标签时。标签占用了一些额外的空间。它没有包围图像。如何通过“a”标记克服这些额外的空间。我用红线表示一个标签

我的html：

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

---

像这样的东西是你想要的吗

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

---

根据此图像在您的网站上的定位方式，您可以通过浮动

来解决此问题。我不明白的是，为什么在a标记上有边框。我猜当您添加边框时，浏览器会将标记解释为包含内容的元素，因此它可能会分配默认的行高并调整宽度以适应标记内的内容。
实时示例：

图像被视为内联的，所以它将遵循字体大小和线条高度，以及换行符。改变图像及其容器的性质，你应该是好的。下面用于
标记的CSS正在使用
内联块
，但您也可以使用
宽度
属性将其更改为
块

如果您也浮动
标记，将其与其他元素对齐会变得很麻烦

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

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

，您可以通过添加以下规则来解决此问题：

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

在您的JSFIDLE中，这似乎对我有效。
演示中唯一的HTML是：
。我不知道该怎么做..你可以通过制作图片来改变这一点，但是你仍然可以在图片下方获得一些额外的空间。为什么它会发生我也更新了它来浮动img，它是固定的。我将把它作为答案发布。+1好答案迈克：）将你的解决方案添加到了帖子本身。（为了确保这篇文章是独立的）谢谢..它在工作，但它影响了其他元素，我不想让它飘到左边。但是我可以给你一些身份证或者职业证明。这很费时。无论如何，谢谢你的代码…我在我的原始代码中没有使用边框。我只是在这里提到额外的空间。
img {
    border:1px solid black;
    float: left;
}

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

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

a img {vertical-align:bottom}