display:inline-block 显示间隙

在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

空隙产生的原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，HTML代码中的回车换行被转成一个空白符,空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

1、解决空隙的办法

聪明的你肯定会想到既然会随着字体大小改变，那把字体设置成0不就可以了
为父元素中设置font-size: 0，子元素上如果有文字，还需要给子元素加自己的font-size

<div class="parent" style="font-size: 0px"> 
	<div class="item" style="font-size: 16px">文字1</div> 
	<div class="item" style="font-size: 16px">文字2</div> 
</div>

缺点:子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size,增加了代码量

2、将所有子元素写在同一行

缺点：这个勉强算，就是代码可读性差

3、给元素设置float:left

<style>
	.item{
	width: 100px;
	height: 100px;
	display: inline-block;
	float: left;
	background-color: pink;
	}
	/*清除浮动*/
	.parent::after{
	content: '';
	display: block;
	clear: both;
	}
</style>
<div class="parent" style="font-size: 0px"> 
	<div class="item" style="font-size: 16px">文字1</div> 
	<div class="item" style="font-size: 16px">文字2</div> 
</div>

缺点：float布局会有高度塌陷问题，解决办法https://blog.csdn.net/qq_32614411/article/details/82223666

4、设置子元素的margin-left为负值，

但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。
如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px

5、完美解决:设置父元素 display:table;word-spacing:-1em;

目前这个方法可以完美解决，且兼容其他浏览器。

.parent{
	display:table;
	word-spacing:-1em;
}