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

a tag taking some extra space in html

本文关键字：空间 标签 html      更新时间：2023-09-26

我在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/

你想要这样的东西吗？

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

根据此图像在网站上的定位方式，您可以通过浮动<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

根据此，您可以通过添加以下规则来解决它：

a img {vertical-align:bottom}

这似乎对我在你的指挥下有效。

实时示例：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;
}

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

相关文章：