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

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


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

效果如下:
如何解决行内元素换行符产生的间隙_第1张图片
可以看到,两个行内元素产生了一个间隙,那么如何消除他呢?

用word-spacing

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

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

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

你可能感兴趣的:(前端)