font-size 设为0 解决行内元素边距问题(空白字符带来的间距问题)

font-size 设为0 解决行内元素边距问题(空白字符带来的间距问题)

很多人应该经常遇到过，inline元素间有边距的问题，比如下面这样

<div>
	<input type="text" name="">
	<button>提交</button>
</div>

都知道会有边距，但是是为什么呢？

是因为在input标签和button标签间有空行，所以可以以下这样修改：

<div>
	<input type="text" name=""><button>提交</button>
</div>

但是这样可读性太差了，还有设置为block什么的，但又要调整布局，现在又一种比较好的方式：

设置顶层元素font-size为0，边距也能消失

<div style="font-size: 0">
	<input type="text" name="">
	<button>提交</button>
</div>