<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,不会占位置