行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...

之前在p这类块元素中的文字，给line-hight=1;就可以去掉文字自带的上下间距，

像这样：

最近突然发现这个方法在行内块和块元素上好使，可当用在span或者a这类内联元素上都不好使，除了转为块元素的方法来去掉上下间距，行高设置为1去不掉内联元素文字的上下间距。

像这样：

 

查阅很多资料之后，得出结论：
行内元素的高度是不受行高影响的，因此设置line-height=1只能影响行内元素在容器中所占据的高度（字号大小的高度），而自己本身的高度未曾改变，哪怕是超出了父容器的高度（在给行内元素设置了背景色之后就可以直观的看到）。

解决方法：

如果需要去掉文字的上下间距，使得文字所在元素的高度同字体高度一致，那么：

　1、使用非行内元素包裹文字（p、div等）

　2、给行内元素转为块或者行内块

　3、给行内元素浮动

之后再设置line-height=1 即可去掉文字上下的间距，大功告成。

 

转载于:https://www.cnblogs.com/Mr-Car/p/10689517.html