为什么a标签中使用img后,高度多了几个像素?

2018-06-24 01:49:42来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<li><a href="#"><img src="images/audio.jpg" alt=""></a></li>
样式:
li{
height:300px;
a{
display: block;
img{
width:100%;
height:100%;

}
}
}
效果如图:

知识补充:默认宽高是浏览器自动计算的inline元素内文本占据的行高等的高度,所以可以设置背景颜色。
inline元素的高度与font-size相关,但不是font-size决定,涉及到匿名框,行框,行内框,内容区等

网上查的答案1:

原因:

a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其有了高度,因为baseline对齐的原因,这个匿名盒子就会下沉,往下撑开一些距离,所以把a撑高了。

解决办法一是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
其他解决办法也有,但这些都是从根本上解决问题
 
网上查的答案2:
 
终于找到原因了,因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线对齐,而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。
或者将font-size设为0。也可以将a标签的display设置为block或者inline-block,并将其行高line-height设为0。

 

			   
			   

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue中修改子组件样式

下一篇:利用canvas打造一个炫酷的粒子背景