CSS display: inline-block 屬性介紹：新手必讀指南

By徐培鈞
LinkedIn

更新日期： 2024 年 10 月 22 日

在學習 CSS 時，你可能會遇到兩個常見的 display 屬性：inline 和 block。

這兩者分別決定了元素是行內顯示還是塊級顯示。

然而，inline-block 這個屬性結合了這兩者的特性，提供了一種靈活且實用的佈局選項。

在這篇文章中，我們將深入介紹 CSS 中的 display: inline-block 屬性，並幫助你理解它如何結合 inline 和 block 的特性，創造更靈活的佈局方式。

什麼是 display: inline-block？

inline-block 是 CSS 中一種既具有 inline 行內元素特性，又具有 block 塊級元素特性的顯示模式。

當一個元素的 display 屬性設置為 inline-block 時，它會像行內元素一樣與其他元素並排顯示，但同時它又像塊級元素一樣，可以設置寬度、高度、內距（padding）、外距（margin）等屬性。

這種屬性在網頁佈局中非常有用，因為它能在保持行內排列的同時，允許你精確控制元素的大小和內外距。

inline-block 與 inline 和 block 的區別

為了更好地理解 inline-block，我們需要先了解 inline 和 block 這兩種常見的 display 模式。

inline（行內元素）

inline 元素不會換行，它們只佔用內容所需的寬度，並與其他行內元素並排顯示。

行內元素無法設置寬度、高度，並且 margin 和 padding 只在水平方向有效，垂直方向無效。

範例：

<span>這是一個行內元素</span>
<span>這是一個行內元素</span>

block（塊級元素）

block 元素會獨占一行，寬度會自動擴展到與父容器同寬，並且可以設置寬度、高度、內距、外距等屬性。這使得它在佈局中更靈活，但也意味著它無法與其他元素並排顯示。

範例：

<div>這是一個塊級元素</div>
<div>這是一個塊級元素</div>

inline-block（行內塊元素）

inline-block 元素既可以與其他元素並排顯示，又可以像 block 元素一樣設置寬度、高度、內距和外距。

這使得它成為一個非常靈活的佈局選項，適合用在需要排列、但又需要控制大小的情況。

範例：

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">元素 1</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen;">元素 2</div>

在這個範例中，兩個 div 元素使用了 inline-block，因此它們可以在同一行顯示，同時還能設置自己的寬度和高度。

為什麼使用 inline-block？

inline-block 提供了一種介於 inline 和 block 之間的佈局模式，它的優勢在於結合了這兩者的特性，使得它非常靈活。

以下是一些常見的使用情境：

創建水平排列的塊級元素

如果你希望多個元素能像行內元素一樣並排顯示，但又希望能夠控制它們的大小，inline-block 是一個非常好的選擇。

範例：

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

在這裡，三個 div 元素會水平排列，但每個元素都可以設置自己的寬度和高度。

水平導航欄

當你需要製作一個水平導航欄時，使用 inline-block 可以讓每個導航項目在同一行顯示，同時可以設置它們的寬度、高度和間距。

範例：

<nav>
  <a href="#">首頁</a>
  <a href="#">關於我們</a>
  <a href="#">服務</a>
  <a href="#">聯繫我們</a>
</nav>
nav a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: lightgreen;
  margin-right: 10px;
}

這個範例創建了一個簡單的水平導航欄，每個 a 標籤都使用了 inline-block，這樣可以設置內距和背景顏色，同時在同一行顯示。

圖文排列

如果你想要讓圖片與文字並排顯示，但希望控制圖片的大小和對齊，inline-block 是一個理想的選擇。

範例：

<img src="example.jpg" alt="Example Image">
<p>這是一段描述文字，圖片與文字將會並排顯示。</p>
img {
  display: inline-block;
  width: 150px;
  height: auto;
}

p {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

在這個範例中，圖片和文字使用了 inline-block，它們可以並排顯示，且圖片大小可控。

注意事項：inline-block 的潛在問題

行內元素之間的空白間距

當使用 inline-block 時，HTML 中的換行符號會被渲染為空白間距，這有時可能會導致多餘的空隙。這是由於行內元素之間的間距計算方式導致的。

解決方案

可以通過以下方式解決空白間距問題：

  • 移除 HTML 中的換行符：讓元素緊貼在一起。

原始代碼（有換行符）：

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

修改後的代碼（無換行符）：

<div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div>
  • 使用 font-size: 0：對父元素設置 font-size: 0，然後為子元素重新設置字體大小。
  • 使用負外距：將空白間距移除。
.box {
  display: inline-block;
  margin-right: -4px; /* 使用負外距消除空白 */
}

確保對齊一致

使用 inline-block 時，元素的垂直對齊默認是以基線（baseline）對齊，這有時會導致元素未按預期對齊。

你可以使用 vertical-align 來控制對齊方式，比如設置為 top、middle 或 bottom。

範例：

div {
  display: inline-block;
  vertical-align: top;
}

這樣可以確保所有元素在同一行的頂部對齊。

結論

CSS 中的 inline-block 屬性結合了行內元素和塊級元素的優勢，使得它成為一個靈活且強大的佈局工具。

無論是創建水平排列的元素、導航欄，還是控制圖文並排顯示，inline-block 都能幫助你實現精確的佈局效果。

同時，通過理解和避免潛在的空白間距問題，你可以更靈活地使用這個屬性來構建更加一致、符合預期的佈局。

希望這篇文章能幫助你更好地理解 inline-block，並在未來的設計中靈活運用它！

Similar Posts