在前端開發中，行內元素（inline elements）和塊級元素（block elements）是兩種基本的 HTML 元素型別，它們在頁面佈局中扮演著不同的角色，主要區別在於：
1. 排列方式：
- 行內元素: 水平排列，從左到右，直到一行排滿才會換行。多個行內元素會在一行內顯示，就像文字一樣。
- 塊級元素: 垂直排列，每個塊級元素都會獨佔一行，即使一行還有剩餘空間也不會和其他元素共享。
2. 尺寸控制：
- 行內元素: 寬度和高度由內容決定，無法透過設定
width、height、margin-top、margin-bottom來直接控制尺寸。padding可以設定，但不會影響其他元素的佈局。 - 塊級元素: 可以透過設定
width、height、margin、padding來控制尺寸，並且會影響其他元素的佈局。
3. 預設樣式：
- 行內元素: 預設不會換行。
- 塊級元素: 預設會換行。
常見的行內元素: span, a, img, strong, em, input, button (特例，可以設定寬高) 等。
常見的塊級元素: div, p, h1-h6, ul, ol, li, table, form 等。
相互轉換：
可以透過修改元素的 display 屬性來實現行內元素和塊級元素的相互轉換。
- 將行內元素轉換為塊級元素： 設定
display: block; - 將塊級元素轉換為行內元素： 設定
display: inline; - 將行內元素轉換為行內塊級元素： 設定
display: inline-block;
行內塊級元素 (inline-block):
inline-block 結合了行內元素和塊級元素的特性：
- 像行內元素一樣: 可以和其他行內元素在同一行顯示。
- 像塊級元素一樣: 可以設定
width、height、margin、padding來控制尺寸。
示例：
假設HTML如下：
<span>這是一個行內元素</span>
<div>這是一個塊級元素</div>
CSS如下：
span {
display: block; /* 轉換為塊級元素 */
background-color: yellow; /* 新增背景顏色以便觀察效果 */
width: 200px;
height: 50px;
}
div {
display: inline; /* 轉換為行內元素 */
background-color: lightblue; /* 新增背景顏色以便觀察效果 */
}
透過修改 display 屬性，可以控制元素的佈局行為，實現靈活的頁面排版。 選擇哪種 display 值取決於你希望元素在頁面中如何排列和表現。
希望以上解釋能夠幫助你理解行內元素和塊級元素的區別以及如何相互轉換。