探讨了inline-block元素在CSS布局中出现的换行与额外间距问题，分析了问题产生的原因，包括代码中的空格和换行导致的默认4px边距，并提供了两种解决方案：一是调整代码书写方式避免空格换行，但会降低代码可读性；二是通过设置父元素的font-size为0来消除间距。
<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，不会占位置
扫一扫
2370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
