解决行内元素因回车换行产生的空白符(水平间隙)的两种方法

由于产生的空白符,水平间隙是由于空格和换行造成的(元素节点有文本节点,在缩进代码时会占据宽度)!

如下图所示:

解决行内元素因回车换行产生的空白符(水平间隙)的两种方法_第1张图片

1.代码不换行

根据产生间隙的原理,代码不换行即可解决问题,但是这会导致代码的可读性大大降低,这是十分不推荐的(毕竟代码是给人看的)!!

2.设置font-size

1)在父类元素中设置font-size为0,这样就是使父类元素中文本就不会占据宽度!!

2)重置父类元素的font-size,让其子元素恢复文字字符,(因为在1)去除了所有的文本,包括子元素的文本和空格回车产生的文本节点)

如下图所示:









可以看出间隙没有了!!

 

本博客由博主原创,如需转载需说明出处!谢谢支持

你可能感兴趣的:(CSS)