我想,做前端的技术人员肯定也遇到过和小编一样的问题,那就是为什么a标签中使用img后的高度多了几个像素?这几天小编整理了几种解决办法,希望对遇到同样问题的你有所帮助。
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,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题。
以上的三种解决办法,就是今天小编和大家分享的,其他的解决办法也是有的,但是这几种是最常用的,希望对你有所帮助。
免费学习课堂
推荐文章
为什么a标签中使用img后的高度多了几个像素?
来源:北京汇仁智杰科技有限公司 时间:2016-04-20 点击: 次
推荐文章
- 织梦dedecms漏洞修复大全含任意文件2016-09-05
- 整顿微信公众号过度营销 对严重违2016-01-26
- SEO优化过程要避免什么?2016-01-26
- 网站空间被挂马的原因原因及解决2016-01-26
- 2016企业该如何运用互联网进行营销2016-01-26
- WEB前端项目开发中需注意的细节2016-01-26
- 低价网站建设的危害有哪些?2016-01-15
- 如何详细的分析你网站的竞争对手2015-06-10
- 网站设计中四个常犯的错误2015-01-22
- 如何搭配网站设计中的色彩?2015-01-22