1. 程式人生 > >如何解決行內元素換行符產生的間隙

如何解決行內元素換行符產生的間隙

行內元素之間如果有換行,那麼兩個元素顯示在一行的時候,會有一個間隙

<!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,原理同上。