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

Question

我在一个标签内放了一个图像。但是当我给图像和标签边框时。 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/

Answer 1

这是你想要的东西吗？

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

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

Answer 3

直播示例：http://jsfiddle.net/rEPXY/18/

图像被视为内联，因此它将遵循字体大小和行高，以及换行符。改变图像及其容器的性质，你应该是好的。 <a>标记下面的CSS使用的是inline-block，但您也可以使用block属性将其更改为width

如果你也浮动了<a>标签，它会变得麻烦，将它与其他元素对齐。

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

Answer 4

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