【css】消除display: inline-block元素之间空隙的方法

问题：

.goods-list{background-color: #f3fbfe;  padding: 10px 20px;}
.good-msg span{display: inline-block;width: 10%;}
.good-msg .p-name{width: 60%;}
.good-msg .p-price{color: #e4393c;font-weight: bold;}
.good-msg .p-delivery{text-align: right}

  <div class="row goods-list">
    <p class="good-msg">
      <!-- span 换了行被解析成空格-->
      <span class="p-name">商品名称11</span>
      <span class="p-price">￥4499.00</span>
      <span class="p-num">x1</span>
      <span class="p-state">有货</span>
      <span class="p-delivery">免邮</span>
    </p>
    <p class="good-msg">
      <!-- span 未换行-->
      <span class="p-name">商品名称22</span><span class="p-price">￥49.00</span><span class="p-num">x1</span><span class="p-state">有货</span><span class="p-delivery">免邮</span>
    </p>
  </div>

原因：

inline-block【特征】

　　[1]不设置宽度时，内容撑开宽度

　　[2]非独占一行

　　[3]支持宽高

　　[4]代码换行被解析成空格

解决方法：

1、为inline-block元素添加样式float:left (推荐)

.good-msg span{display: inline-block;width: 10%;float:left}

2、删去元素之间的空白

<span class="p-name">商品名称22</span><span class="p-price">￥49.00</span><span class="p-num">x1</span><span class="p-state">有货</span><span class="p-delivery">免邮</span>

----------

<span class="p-name">
商品名称22</span><span class="p-price">
￥49.00</span><span class="p-num">
x1</span><span class="p-state">
有货</span><span class="p-delivery">
免邮</span>

----------

<span class="p-name">商品名称22</span><span
class="p-price">￥49.00</span><span
class="p-num">x1</span><span
class="p-state">有货</span><span
class="p-delivery">免邮</span>

 

参考：inline-block元素之间的空隙的消除方法