内联元素之间有空隙的解决方案

图片高度46px

内联元素之间有空隙的解决方案

文字高度14px,已设置line-height: 1;

内联元素之间有空隙的解决方案

父元素高度为auto,也就是图片中显示的64px, 按理来说,高度应该 是图片(46px) + 文字(14px) = 60px,那多出来的4px是哪来的?

内联元素之间有空隙的解决方案

解决方法

设置文本的行高,line-height: 1;

可能是换行符引起,建议:如果行内元素少,就不要换行了,如果换行,就在行内元素之间加上注释<span></span><!-- --><span></span>

设置父元素的font-size: 0;

最终效果

内联元素之间有空隙的解决方案

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjxgd.html