標記在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;
}

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;
}

Answer 3

圖像被視為內聯，因此它將遵循字體大小和行高，以及換行符。 改變圖像及其容器的性質，你應該是好的。 <a>標簽下面的CSS使用inline-block但您也可以使用width屬性將其更改為block

如果你也浮動了<a>標簽，它將變得很麻煩，將它與其他元素對齊。

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

Answer 4

根據這個，您可以通過添加以下規則來解決它：

a img {vertical-align:bottom}

這似乎對你的jsfiddle有用。

Answer 5

我不明白為什么你在標簽上有邊框。 我猜你在添加邊框時，瀏覽器會將標記解釋為包含內容的元素，因此它可能會分配默認的行高並調整寬度以適應標記內的內容。