之前在p这类块元素中的文字,给line-hight=1;就可以去掉文字自带的上下间距,
像这样:
最近突然发现这个方法在行内块和块元素上好使,可当用在span或者a这类内联元素上都不好使,除了转为块元素的方法来去掉上下间距,行高设置为1去不掉内联元素文字的上下间距。
像这样:
查阅很多资料之后,得出结论:
行内元素的高度是不受行高影响的,因此设置line-height=1只能影响行内元素在容器中所占据的高度(字号大小的高度),而自己本身的高度未曾改变,哪怕是超出了父容器的高度(在给行内元素设置了背景色之后就可以直观的看到)。
解决方法:
如果需要去掉文字的上下间距,使得文字所在元素的高度同字体高度一致,那么:
1、使用非行内元素包裹文字(p、div等)
2、给行内元素转为块或者行内块
3、给行内元素浮动
之后再设置line-height=1 即可去掉文字上下的间距,大功告成。