分不清區塊元素與行內元素？讓我們一起來解惑！

作為一名初階前端工程師，了解 HTML 元素的基本分類是非常重要的。區塊元素(block)和行內元素(inline)是兩種基本的 HTML 元素類型，弄清它們的特點和用法能讓你的網頁佈局更精確、更符合預期。

接下來，讓我們逐步了解這些元素的區別及其應用。

先附上以下範例的程式碼

區塊元素是什麼？要注意什麼？

區塊元素（Block Elements） 通常用於建立網頁的大結構，分隔主要內容區塊，構建頁面佈局。

特點：

  • 獨占一行：區塊元素總是從新行開始，並佔據其父容器的全部寬度。無論設定寬度大小，都會自動換行。
  • 控制尺寸：你可以控制區塊元素的高度、寬度、行高以及上下左右的邊距和內距。
  • 典型應用：適合用來構建頁面的大框架或段落內容。

常見區塊元素：

  • <div>：用來分組或包裹其他元素。
  • <p>：段落。
  • <h1> 至 <h6>：標題。
  • <ul>、<ol> 和 <li>：列表及其項目。
  • <table>：表格。

注意事項：

  • 區塊元素會佔據整行，下一個元素會顯示在新的一行。

  • 適合用來容納其他區塊元素或行內元素，形成頁面結構。

    例子：

    block-el

行內元素是什麼？要注意什麼？

行內元素（Inline Elements） 用於標記和格式化小範圍的文本或其他行內元素，通常不會單獨形成結構，而是作為區塊元素的一部分。

特點：

  • 與其他元素同一行：行內元素不會從新行開始，與相鄰的行內元素排列在同一行，直到排不下才換行。
  • 無法設置尺寸：行內元素的寬度和高度隨內容變化，設置寬高屬性無效。
  • 典型應用：適合用來標記和格式化頁面內的文本片段。

常見行內元素：

  • <span>：用來包裹文本或其他行內元素。
  • <a>：超連結。
  • <img>：圖像。
  • <em> 和 <strong>：分別用來標示強調和加粗的文本。
  • <input>：輸入框。

注意事項：

  • 行內元素不能設置寬高，只有左右的 padding 和 margin 有效，上下無效。

  • 適合用來標記小範圍的文本或其他行內元素。

    例子：

    延續上圖的設定，再加上`.highlight`的樣式。

    加上 .highlight 的設定，可以發現即使空白空間再大，區塊元素 <p> 還是自己佔據整行，而行內元素<span>、<em> 和 <strong>則是根據內容的寬度無縫接續在一起；且寬高等設定是無效的。

    為了更清楚說明行內元素左右的 padding 和 margin 有效但上下無效，我再把.highlight 的背景顏色調透明，加上 padding 來看看：

    `height`和`padding`上下位置並沒有沒有被影響。

    雖然看起來這個highlight元素是透過padding 把高寬面積撐開了，可實際上只有左右橫向有佔到空間，上下位置其實是沒有被影響的。

    初學時常因為明明調整了padding 或 margin，可是它的上下位置總是雷打不動而感到困擾，現在終於知道為什麼了啦！


那麼分不清區塊元素與行內元素會發生哪些問題？

  • 布局錯亂：例如，把一個需要獨占一行的標題設置為行內元素，可能會導致布局混亂。
  • 樣式失效：例如，給行內元素設置寬度和高度會無效，導致樣式無法按預期顯示。（如上圖所示）
  • 排版不一致：區塊元素和行內元素的排版特性不同，混用可能導致排版不一致。

問題例子：

1
2
3
4
5
<!-- 錯誤用法：應該使用 <div> 而不是 <span> 來包裹段落 -->
<span>
  <h1>標題</h1>
  <p>這是一段文字。</p>
</span>

來考考自己這樣寫會發生什麼問題～☺︎

解決辦法

  1. **使用 display: inline-block**：同時具備行內元素的排列特性和區塊元素的尺寸控制能力。
  2. **使用 display: block**：使行內元素變為區塊元素，完全控制上下左右的 padding 和 margin。
  3. **使用 line-height**：增加行內元素的上下間距。
  4. 使用偽元素：用 ::before 和 ::after 增加行內元素周圍的空間。

例子：

1
2
3
4
5
6
7
8
9
.pseudo-element-example::before,
.pseudo-element-example::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  padding: 10px 0;
  vertical-align: middle;
}

偽元素之後會寫到，這裡不做說明囉


延伸知識點：空元素

空元素（Empty Elements）：

  • 沒有內容：空元素在開始標籤中閉合，沒有內容。
  • 單標籤：只有開始標籤，沒有結束標籤。

常見空元素：

  • <br>：換行。
  • <hr>：水平線。
  • <img>：圖像。
  • <input>：輸入框。
  • <link>：鏈接外部資源。
  • <meta>：元數據。

了解區塊元素和行內元素的特點及用法，並且能靈活應用這些元素，會讓你的網頁設計更具條理和美觀。

那就明天再見了 ✨