链接标签内的图像[重复]答案

【问题标题】：Image inside link tag [duplicate]链接标签内的图像[重复]
【发布时间】：2014-07-27 17:47:41
【问题描述】：

您好，我正在创建一个网站，同时将品牌徽标放在网页右上角的链接标签内，我遇到了这个问题

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

       </a>

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

结果是一个标签虽然中没有文字一个标签。但是当我给 font-size:0 时，它可以工作。

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

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

我有它的样本。请帮我解决这个问题。

好的，对不起，我从链接中得到了答案。

谢谢

【问题讨论】：

标签： html css web

【解决方案1】：

将imgs display 更改为block

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

看到这个jsfiddle

那么它有什么作用呢？链接内的图像有一个默认的display inline-block。您设置为 display:inline-block 的 a。正是两者的结合与a 元素内的空格相结合，才能解决问题。

您可以使用两个嵌套的inline-blockdivs 进行模拟，其尺寸仅设置在内部一个。 http://jsfiddle.net/TLBEx/4/

【讨论】：