div或者a标签比包含的img元素高出几个像素

LinSan2018年11月01日learning,

最近很烦这个高度问题:a里面有个图片,图片的高度什么都设置好了,但是整体来显示的时候,在图片的底部却会多出几个像素,把整体给撑起来变的高了点。林三这里是留言本的读者墙那里,应该是链接比图片的高度增加了7px,各种方法测试中,最后结合度娘,结束忧伤。

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

解决办法一是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒。img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线对齐,而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。

林三这里实现的方式是给 img 加上 img{vertical-align:bottom;} ,最终解决了空白问题。

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: