如何解决行内元素换行符产生的间隙

行内元素之间如果有换行,那么两个元素显示在一行的时候,会有一个间隙

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div>
  <span>行内元素</span>
  <span>行内元素</span>
 </div>
</body>
</html>

效果如下:
在这里插入图片描述
可以看到,两个行内元素产生了一个间隙,那么如何消除他呢?

用word-spacing

<div style="word-spacing:-4px">
 <span>行内元素</span>
 <span>行内元素</span>
</div>

效果如下:
在这里插入图片描述

如果是图片产生的空隙,还可以用letter-spacing,原理同上。

我想说的话

学习进步离不开网友的支持,希望大家以后多多支持,能够指出文中不足与疑惑的点,我会为大家一一解答。有兴趣的小伙伴可以加入QQ群:852590787
QQ

猜你喜欢

转载自blog.csdn.net/weixin_42420703/article/details/83217107