码迷,mamicode.com
首页 > 其他好文 > 详细

line-height的理解

时间:2017-09-25 21:52:58      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:标签   节点   ott   相同   影响   com   文字   alt   es2017   

font-size:0清除display:inline-block元素换行符间隙,比如两个img标签之间有换行符

行内元素的高度是由其行高决定的。

Div或者其他元素内的图片,底部会有间隙,原因是图片是inline-block元素,默认与文字的基线对齐,文字的基线距离文字所在的lineline-boxes底部还有一段距离(行高的最底部),所以图片底部会出现间隙,(如果没有文字,可以认为存在隐匿文本节点,与真实文字的作用相同)解决方案:

1、 图片display:block,此时vertical-align不起作用或者说设置block之后文字已经另起一行了

2、 图片vertical-align:bottom,与文字所在区域的底部对齐

3、 设置父元素line-height:0,内部文字继承父元素的行高,其高度为0,也就不会对图片产生影响了。

 技术分享

 

line-height的理解

标签:标签   节点   ott   相同   影响   com   文字   alt   es2017   

原文地址:http://www.cnblogs.com/happypayne/p/7593902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!