HTML+CSS布局时，明明宽度足够为何会换行

<div class="card-con">
	<div class="card-shop-item"></div>
	<div class="card-shop-item"></div>
	<div class="card-shop-item"></div>
	<div class="card-shop-item"></div>
</div>

例如上述例子，外层card-con的div宽度为400px，内层div格式改为inline-block，宽度为100px，但会发生换行，无法达到预期效果。

原因：inline-block默认会有4px的边距，是由于代码本身的换行，空格产生的，无法通过margin:0消除

解决办法：
1. 写代码时不要写空格和换行
注：不推荐，代码可读性差
2. 父元素加属性font-size=0，此时所有字符包过空字符在内，字体大小均为0，不会占位置