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

MomentYY發表於2021-12-22
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;
}

相關文章