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

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

像这样:


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

像这样:

 

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

解决方法:

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

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

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

 3、给行内元素浮动

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

 

posted @ 2019-04-11 14:34  梅思德尔车  阅读(2138)  评论(0编辑  收藏  举报