强制<a> and <img/> to have the same height

Question

I have a simple situation where I have an a-element containing an img-element. My problem is my a-element is a few pixels higher than my img-element. I always have a thin visible line of the a-element below the img-element.

图像下方的细红线是我的a元素的背景色。

如何删除此行？

Answer 1

将图像上的垂直对齐设置为顶部：

img {
    vertical-align:top;
}

您可以在下面的示例中看到它的工作原理（注释掉vertical-align以查看重新显示的间隙）。

a {
  background: #faa;
}
img {
  vertical-align:top;
}

<a href="#"><img src="http://www.placehold.it/200x200" /></a>

Answer 2

为display: block提供img，为inline-block提供<a>：

img {display: block;}

<强>段

＆＃13;

＆＃13;

a {
  background: #ccf;
  display: inline-block;
}

img {
  display: block;
}

＆＃13;

<a href="#"><img src="http://www.placehold.it/200x200" /></a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可能想尝试同时给出固定的高度和宽度。对于前。

a {
width:50px;
height:50px;
}
img {
width:50px;
height:50px;
}

Answer 4

img{
  max-width: 100%;
  max-height: 100%;
}

不要明确定义图像的高度和宽度

Answer 5

我通常做的是

a {
  display: inline-block;
}
img {
  display: block;
}

因为我知道它是如何运作的。

Proof in a fiddle.

Answer 6

您可以使用以下代码行：

a, img {
height: (your height);
}

希望这有助于你！