HTML行內級元素之間的空格問題

HTML行內級元素之間的空格問題

1.為什么元素之間會產生空格？

在編寫行內級元素（包括inline-block元素）的代碼之間如果有空格（換行），在瀏覽器上就會顯示元素之間有空格。

示例代碼如下：

.box span {
  background-color: red;
}

<div class="box">
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</div>

瀏覽器運行結果：

注意：

• 不管我們在元素之間敲如多少空格，都會被解析成一個空格；
• 空格本身就是一個字符，所以空格的大小是由父元素的font-size來決定的，父級元素設置的字體越大，空格越大；

2.如何去掉元素之間的空格呢？

• 元素代碼之間不留空格：元素產生空格的原因就是我們敲入了空格或者換行，解決方案一就是元素代碼之間不留空格，弊端就是代碼不美觀並且可讀性差。

  <div class="box">
    <span>span1</span><span>span2</span><span>span3</span>
  </div>
  

• 注釋掉空格：瀏覽器不會解析html代碼的注釋，將空格注釋掉也可以消除元素之間的空格，弊端就是繁瑣、不美觀。

  <div class="box">
       <span>span1</span><!--
    --><span>span2</span><!--
    --><span>span3</span>
  </div>
  

  

• 設置父元素的font-size為0：空格的大小是由父元素的字體大小決定的，所以可以給父元素添加font-size: 0;，注意原來需要消除空格的元素要重新設置自己的font-size，要不然字體大小會繼承父元素的，弊端就是添加了多余的css屬性，並且該方法在Safari瀏覽器中不適用。

  .box {
    font-size: 0; /* 給父級元素設置字體大小 */
  }
  
  .box span {
    background-color: red;
    font-size: 16px; /* 防止字體屬性繼承 */
  }
  

  

• 給元素添加浮動：其原理是添加浮動會觸發BFC，元素之間生成結界，形成一個獨立的渲染空間，元素與元素之間就不會留有空格了，是目前比較好的解決方案。

  .box span {
    float: left;
    background-color: red;
  }