因為現在發現 HTML 和 CSS 都會交替用到，標題不好區分，就當個綜合應用吧！

區塊元素

• CSS 設定：display: block
• 盡可能佔滿版面
• 會另起一行
• 常見：<h1>、<p>、<ul><li>
• <div>：用在排版的區塊標籤，本身不代表任何意思(非語意標籤)，搭配 id 或 class 屬性就可以針對內容作調整設定

行內元素

• CSS 設定：display: inline
• 比較常用在段落裡
• 沒辦法設定寬、高
  • 把 display: inline 改成 display: block，如把 <a> 連結更改成區塊後，在點擊連結只要在區塊內都可以點擊得到
  • 反之可以把區塊元素改成行內元素，把 display: block 改成 display: inline
• 常見：<a>、<img>
• <span>：用在排版的行內標籤，本身不代表任何意思(非語意標籤)，搭配 id 或 class 屬性就可以針對內容作調整設定

問題

• 如何判別是區塊元素還是行內元素？
  • 更改背景顏色，如果會延伸版面就是區塊，反之只在範圍內就是行內元素

練習

針對剛剛的部分做個綜合練習

<h2>第 <span class="blue">12</span> 屆鐵人賽</h2>

<p>連到<a href="https://ithelp.ithome.com.tw/2020-12th-ironman" target="_blank" title="連到鐵人賽" class="btn">第 12 屆鐵人賽</a></p>
    

.blue {
    color: blue;
}

.btn {
    color: white;
    background: blue;
    height: 25px;
    display: block;
}

結果如下，可以觀察到區塊以及有沒有換行的特性

參考資料

• 區塊元素 行內元素 空元素特點？分別有哪些？
• CSS : display屬性-區塊和行內元素差異

次回

繼續綜合介紹 HTML 和 CSS