CSS - 行內區塊：初學者的全面指南

Hello there, aspiring web developers! Today, we're going to dive into the wonderful world of CSS inline-block. As your friendly neighborhood computer teacher, I'll guide you through this concept step-by-step, with plenty of examples to make it crystal clear. So, grab your favorite beverage, get comfortable, and let's embark on this exciting journey together!

CSS - Inline Block

什麼是行內區塊？

在我們深入了解之前，讓我們先了解什麼是行內區塊。想像你正在書架上排列書籍。有些書你想直立放置（像行內元素），有些則想平放（像區塊元素）。但如果你想要一本書直立並且佔據特定的空間呢？這就是行內區塊的用處！

display: inline-block CSS屬性結合了行內和區塊元素的特性。它讓元素可以像行內元素一樣並排坐落，但也尊重寬度和高度屬性，就像區塊元素一樣。

讓我們看一個簡單的例子：

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

在這個例子中，我們創建了三個帶有類別 inline-block-element 的 div 元素。它們會並排出現（行內），但我們也可以設定它們的寬度和高度（區塊）。

CSS 行內區塊 - 不同行為

行內區塊的一個很酷的特性是它會根據內容有不同的行為。讓我們透過一個例子來探討這一點：

<style>
.container {
font-size: 0; /* 這會移除行內區塊元素之間的空間 */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* 重置內容的字体大小 */
vertical-align: top; /* 將盒子上對齊 */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

在這個例子中，我們創建了三個具有不同高度的盒子。注意它們都是因為 vertical-align: top 而在頂部對齊。試著玩轉這個屬性，看看它如何影響對齊！

CSS 行內區塊 - 導航連結

行內區塊的一個常見用途是創建導航菜單。讓我們來創建一個簡單的導航欄：

<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

這會創建一個時尚的導航欄，帶有可點擊的連結。inline-block 屬性讓我們可以設定這些元素的內距和邊距，這在使用純 inline 時是不可能的。

CSS 行內區塊 - 按鈕組

行內區塊非常適合用於創建按鈕組。下面是如何操作的：

<style>
.btn-group {
font-size: 0; /* 移除按鈕之間的空間 */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>

<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>

這會創建一個漂亮的按鈕組，按鈕之間無縫連接。

CSS 行內區塊 - 圖像和文字

行內區塊對於對齊圖像和文字非常有用。讓我們看看如何操作：

<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* 根據圖像寬度調整 */
}
</style>

<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Placeholder">
<p>這是一些出現在圖像旁邊的文字。行內區塊屬性讓我們能夠垂直對齊圖像和文字。</p>
</div>

這創造了一個圖像和文字並排的漂亮佈局。

CSS 行內區塊 - 進度條

最後，讓我們使用行內區塊來創建一些進度條：

<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>

<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>

這會創建簡單的進度條，帶有百分比指標。

結論

好了，各位！我們已經探討了多功能的 inline-block 屬性及其各種應用。從導航菜單到進度條，這個屬性提供了靈活的頁面元素佈局方式。

記住，精通 CSS 的關鍵在於練習。所以，不要害怕試驗這些例子並創造你自己的獨特設計。快樂編程！

方法	描述
`display: inline-block`	結合行內和區塊元素的特性
`vertical-align`	垂直對齊行內區塊元素
`width` 和 `height`	可以應用於行內區塊元素
`margin` 和 `padding`	可以在所有方向應用
字體大小技巧	在父元素上設定 font-size: 0 會移除行內區塊子元素之間的間隙

Credits: Image by storyset