line-height的理解

Posted 2020-10-08 小目标

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，也就不会对图片产生影响了。