在前一天，我們了解了盒模型，知道每個元素都有內容區、內距、邊框和外距。今天來講區塊元素（block）與行內元素（inline）的差別，這對排版很重要。

1. 區塊元素（Block）

特點
• 佔滿整行，會自動換行
• 寬度會撐滿整個父容器
• 可以設定寬高（width、height）
• 常見例子：div、p、h1~h6
div {
width: 300px;
height: 100px;
background-color: lightgreen;
margin-bottom: 10px;
}

2. 行內元素（Inline）

特點
• 不會換行
• 不會佔滿整個版面，同一行可以有很多個行內元素
• 常用在段落 裡面（像文字、連結、標記）
• 不能設定寬高（width、height），大小由內容撐起
• 設定 padding：上下左右都有效
• 設定 margin：左右有效，上下無效
常見例子：span、a、strong
span {
padding: 2px 5px;
border: 1px solid red;
background-color: yellow;
}

區塊元素 (Block) vs 行內元素 (Inline) 差異

3. 圖片元素 img

特點
• 屬於 行內元素（inline element）
• 屬於 空元素（empty element / void element） → 裡面不能放內容
• 屬於 自閉合標籤（self-closing tag） → 沒有結束標籤

4. 實務應用

• 大區塊：用區塊元素排版
• 文字、連結：用行內元素
• 插入圖片：用 img，搭配寬高、margin 調整位置

學習心得
今天所學讓我更清楚排版的基本概念。像行內元素雖然方便放在文字中，但限制比較多；而 雖然也是行內元素，卻能直接設定寬高，算是特例。把這些差異弄懂後，遇到版面跑掉的情況就能快速找到原因，排版也不再那麼混亂。
同時我也發現，選擇正確的元素對整體結構非常重要。如果用錯了元素，可能會導致排版不符合預期，甚至要花更多時間去「硬調」。現在知道區塊元素適合用來分區、行內元素適合處理文字細節，對寫網頁的邏輯會更清楚。未來在寫 CSS 或處理更複雜的版面時，應該能更快上手，也更容易維護整體架構。