CSS-解决内联元素由于空白字符带来的间距问题

概要：

1. 在项目中遇到两个行内元素之间有间隔的情况。

	<div>
		<style>
	      a {
	        background-color: red;
	      }
	    </style>
		<a>123</a>
		<a>234</a>
	</div>

网上搜了搜，发现是空白字符的问题。

2. 如何解决呢？

1. 使用flex布局

这个我最先是在《CSS权威设计》上的flex那一章看到的。书上说可以用来做空白压缩，当时没懂，看到这里就了然了。

<div style="display: flex">
	<style>
      a {
        background-color: red;
      }
    </style>
	<a>123</a>
	<a>234</a>
</div>

2. 不使用空格

1. 不写空格

我不写空格，不换行，那么不就没有空白的填充字符了吗？
但是这么写，代码风格什么的就不谈了。
万一情况复杂一点，万一你没有注释，后续维护的人不了解你的苦心直接一个换行，那不就又废了。

	<div>
		<style>
	      a {
	        background-color: red;
	      }
	    </style>
		<a>123</a><a>234</a>
	</div>

2. 用注释

比直接写在一起好。

	<div>
		<style>
	      a {
	        background-color: red;
	      }
	    </style>
		<a>123</a><!--
		--><a>234</a>
	</div>

3. 用结束标签

不要尝试用开始标签，那个不符合html语法的…

	<div>
		<style>
	      a {
	        background-color: red;
	      }
	    </style>
		<a>123</a
		><a>234</a>
	</div>

3. 设置外层div元素的字体大小为0，a标签的字体大小独立设置。

（刚开始我a标签的font-size还给了个!important，防止内联优先级太高，后来发现首先判定a标签自身的规则，然后才轮到继承自div规则…）

	<div style="font-size: 0px">
	    <style>
	        a {
	          background-color: red;
	          font-size: 16px;
	        }
	      </style>
	    <a>123</a>
	    <a>234</a>
	  </div>

4.设置外层div元素的letter-spacing: -5px，a标签的字体间隔独立设置。

	这样设置不大好，因为这个值是看出来的，在复杂情况下不是那么准。
	如果设置这里的div的font-size:200px，那么我们可以发现两个a标签之间的距离明显大于5px。
	然后我也发现，letter-spacing无论多小，两个a标签是不会重复的，那么这种方法可能需要设置一个很小的letter-spacing来时应各种情况，或者看使用场景再具体设置。

	<div style="letter-spacing: 0px">
	    <style>
	        a {
	          background-color: red;
	          font-size: 16px;
	          letter-spacing: 0;
	        }
	      </style>
	    <a>123</a>
	    <a>234</a>
	  </div>

5. 使用float

	使用float脱离文档流，当然就不会出现空白字符的干扰问题。
	当然float需要注意父元素高度塌陷。

	<div >
	    <style>
	        a {
	          background-color: red;
	          font-size: 16px;
	          float: left
	      }
	      </style>
	    <a>123</a>
	    <a>234</a>
	  </div>

题外话:解决高度塌陷

1. 加一个div
2. 使用after
   本质上都是加一个元素，然后清除浮动。

	<div >
		<style>
			a {
			background-color: red;
			font-size: 16px;
			float: left
			}
			div::after {
			content: "";
			display: block;
			clear: both;
			}
		</style>
		<a>123</a>
		<a>234</a>
	</div>

总结

最后在项目中，我还是选择了flex方法，因为情形较复杂。字体大小是更外层的元素设置的，所以font-size、letter-spacing方法直接放弃，不用空格个人不建议，float相比flex需要清除浮动，最后就挑了个flex。