HTML行內級元素間的空格問題怎么解決

這篇文章主要講解了“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;

}

感謝各位的閱讀，以上就是“HTML行內級元素間的空格問題怎么解決”的內容了，經過本文的學習后，相信大家對HTML行內級元素間的空格問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！