链接标签内的图像

Question

嗨,我正在创建一个网站,同时在网页右上角的链接标签内放置品牌标识,我遇到了这个问题

       <a href="#" >
          <img src='img.png'>

       </a>

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

结果是包装图像高度实际上超过50px 的标签,即使标签中没有文本也是如此.但是当我给出font-size:0时它可以工作.

所以我需要导致链接标签占用更多高度的原因.

请帮助我理解这个概念,而不仅仅是一些css代码

我有它的样品.请帮我解决一下这个 .

http://jsfiddle.net/amerrnath/TLBEx/

好的抱歉,我从链接中得到了答案.

锚标记底部的白色空间

谢谢

Answer 1

将imgs 更改display为block

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

看到这个jsfiddle

那它是做什么的？链接内的图像默认display为inline-block.你设置的那个display:inline-block.它是两者的结合,与a元素内部的空白相结合,可以解决问题.

您可以使用两个嵌套的inline-block divs 进行模拟,这两个嵌套的尺寸仅设置在内部尺寸上.http://jsfiddle.net/TLBEx/4/