CSS中display: inline-block的用法解析-css教學-PHP中文網

首頁

web前端

css教學

CSS中display: inline-block的用法解析

不言

Jan 02, 2019 am 10:25 AM

csscss3html5react.jsvue.js

這篇文章帶給大家的內容是關於CSS中display: inline-block的用法解析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

迷之間隙

我們建立一個導航列表，並將其列表item 設定為inline-block，主要程式碼如下：

<div>
  <div><a>我</a></div>
  <div><a>我</a></div>
  <div><a>我</a></div>
</div>
.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}

效果圖如下：

CSS中display: inline-block的用法解析

我們可以從效果圖中看到列表item 之間有一點小空隙，但是我們在程式碼中並沒有設定margin 水平間距。那麼這個空隙是如何產生的呢？

這是因為我們寫程式碼時輸入空格、換行都會產生空白符。而瀏覽器是不會忽略空白符的，並且對於多個連續的空白符瀏覽器會自動將其合併成一個，故產生了所謂的間隙。

對於上面實例，我們在列表 item 元素之間輸入了回車換行以方便閱讀，而這間隙正是這個回車換行產生的空白符。

同樣對於所有的行內元素（inline，inline-block），換行都會產生空白符的間隙。

如何消除空白符

從上面我們了解到空白符，是瀏覽器正常的表現行為。但對於某些場景來說，並不美觀，間隙大小非可控，所以我們往往需要去除這個空白間隙。一般來說我們有兩種方法來去除這個換行造成間隙：程式碼不換行和設定 font-size。

程式碼不換行

我們了解到，由於換行空格導致產生換行符，因此我們可以將上述例子中的列表item 寫成一行，這樣空白符便消失，間隙就不復存在了。其程式碼如下：

<div>
  <div>导航</div>
<div>导航</div>
<div>导航</div>
</div>

但考慮到程式碼可讀及維護性，我們一般不建議連成一行的寫法。

設定 font-size

首先要理解空白符歸根結底是個字符，因此，我們可以透過設定 font-size 屬性來控制產生的間隙的大小。我們知道如果將 font-size 設為 0，文字字元是沒辦法顯示的，那麼同樣這個空白字也沒了，間隙就沒了。

於是順著這個思路就有了另一個解決方案：透過設定父元素的font-size 為0 來去除這個間隙，然後重置子元素的font-size，讓其恢復子元素文字字元。

所以方法程式碼如下：

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}

使用方法時需要特別注意其子元素一定要重置font-size，不然很容易掉進坑裡（文字顯示不出來）。