2019.08.16 周五:
html结构是这样的,未使用任何样式!
<body>
<div id="container">
<a href="#"><img src="favicon.png" alt="logo"></a>
</div>
</body>
但在chrome的开发者工具中查看,a的高度并不是图像的高度,而是一个很奇怪的高度。
这是什么原因,如何让a标签的高度与img标签的高度一样
[<img>
标签为什么会有底下的空白呢?这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧!http://www.zhihu.com/question/21558138 讲得很周到!]
总结这个问题的几种解法:
[a]处理基线
a{display:block;}
img{vertical-align: bottom;}
[b]强行去掉<a>
标签的行高
a{display:block;line-height:0px;}
[c]没有设置行高的时候可以去掉字体大小;
a{display:block;font-size:0px;}