去除inline-block元素间距的方法

现象描述

两个inline-block元素间有空格或有换行的情况下，会产生间距。

<div>
	<input type="text" />
	<input type="button" value="确认"/>
</div>

两个非inline-block元素通过CSS转换为inline-block元素，也会产生间距。

.link {
	text-decoration: none;
	padding: 5px;
	background-color: orange;
	display: inline-block;
}

<div class="content">
	<a href="#" class="link">首页</a>
	<a href="#" class="link">标签</a>
	<a href="#" class="link">分类</a>
</div>

解决方法

去除标签间的间隔

元素间出现间距的原因就是标签之间的空格，因此，去掉HTML中的空格，自然间距就没有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="content">
	<a href="#" class="link">首页
	</a><a href="#" class="link">标签
	</a><a href="#" class="link">分类</a>
</div>

使用margin负值

.link {
	display: inline-block;
	margin-right: -5px;
}

margin负值的大小与上下文的字体和文字大小相关,不建议使用。

使用font-size: 0

.content {
	font-size: 0;
}
.link {
	font-size: 16px;
}

使用letter-spacing

.content {
	letter-spacing: -5px;
}
.link {
	letter-spacing: 0;
}

使用word-spacing

.content {
	word-spacing: -5px;
}
.link {
	word-spacing: 0;
}