開始前先題外話一下，因為我在封面畫了超多細節，但其實大多數跟 CSS 內容無關，就是想畫所以就畫了！原本想說要用同一種封面排 30 天，但我發現第 5 天開始膩了！所以決定放大來一一介紹封面的細節！！！

今天的封面是吃著餅乾 cookie 的 Chrome 瀏覽器，上面坐著離線小遊戲的恐龍。還記得有一陣子，日本那邊好像有幫 Chrome 出一個很可愛的小動畫，所以就畫了！ヽ(●´ε｀●)ノ

回到主題！

經過前幾天對 CSS 基礎與選擇器的認識，今天我們要來聊聊控制網頁元素「顯示方法」的關鍵技巧！顯示方法直接決定了網頁會怎麼排版。接下來，我們將介紹 CSS 的 display 屬性，帶你搞懂區塊元素與行內元素有什麼不同，以及它們是如何影響整體的排版與互動的！

HTML 標籤預設顯示方式

每個 HTML 元素都有一個預設的顯示方式。即使不套用任何 CSS 樣式，瀏覽器仍會為元素提供基本的排版效果，這就是 HTML 元素的預設顯示方式。這些顯示方式決定了元素在網頁上如何排列、佔用多少空間，以及如何與其他元素互動。

<h1>這是一個標題</h1>
<p>這是一個段落，它會佔據整行的空間。</p>
<p>
  這段文字中包含了<strong>粗體文字</strong>
  和<a href="#">連結</a>，它們是行內元素。
</p>

由以上這段程式碼為例，可以發現元素有兩種不同的顯示：

1. 如同方塊，獨佔一行：像是標題 <h1> 和段落 <p>，它們會自動換行，每個元素都獨佔一整行的空間，就像文件中的段落一樣，這也就是「區塊元素（block）」。
2. 如同文字，不主動換行：像是粗體 <strong> 和連結 <a>，它們不會主動換行，而是在同一行內並排顯示，就像句子中的單字一樣，這也就是「行內元素（inline）」。

根據這兩種顯示方式，我們可以將 HTML 元素的預設顯示方式分為「區塊元素」和「行內元素」兩大類。以下整理了一些常見的 HTML 標籤及其對應的顯示方式：

理解這些顯示特性，有助於我們更精確地控制網頁的排版和外觀。接下來將詳細說明如何更改這些預設顯示方式。

Display 屬性

如果想要調整元素的預設顯示方式，可以使用 CSS 中的 display 屬性進行調整。

display: value;

其中常見的值包含：block、inline、inline-block、none 等，以下將利用範例依序介紹這些值的特性。

<div class="nav">
  <div class="item item-1">物件 1</div>
  <div class="item item-2">物件 2</div>
  <div class="item item-3">物件 3</div>
</div>

Block 區塊元素

區塊元素，顧名思義就是一整塊區域的元素。

.item {
  display: block;
}

1. 獨占一整行：block 元素會佔據整行空間，會使下一個元素自動移至下一行。

   • 當設定為 block 顯示方式時，.item-1、.item-2、.item-3 會自動垂直向下排列，如果需要垂直排列的內容，很適合直接使用。

   • 由於 <div> 預設就是 block，使用時其實不用特別寫。

     .item {
       display: block;
       border: 1px solid #000; /* 邊框 */
     }
     

     

2. 預設寬度為 100%：寬度預設會自動填滿整個父元素的寬度。

   • 當父元素 .nav 寬度設定為 150px，那麼內部子元素 .item 也會自動填滿 150px。

     .nav {
       border: 1px solid #000; /* 邊框 */
       padding: 2px;           /* 內部間距 */
       width: 150px;           /* 寬度 */
     }
     .item {
       display: block;
       border: 1px solid #000; /* 邊框 */
     }
     
     

     

3. 能夠設定寬度、高度：可以透過 CSS 的 width 和 height 屬性來調整元素大小。

   • 可以統一設定 .item 的尺寸，也可以使用個別的 class 為每個元素設定不同的尺寸。

     .item {
       display: block;
       border: 1px solid #000;
       width: 100px;           /* 寬度 */
       height: 50px;           /* 高度 */
     }
     
     .item-1 {
       width: 200px;           /* 寬度 */
     }
     

     

4. 支援元素內部與外部間距：可以設定元素內部間距（padding）跟外部間距（margin），且上下左右四個方向都可以設定。

   • 設定 padding，讓內部內容文字與框線之間有距離。設定 margin 讓元素與元素之前，中間產生間距。

     .item {
       display: block;
       border: 1px solid #000;
       width: 100px;
       height: 50px;
       padding: 12px;  /* 內部留白 */
       margin: 8px;    /* 外部間距 */
     }
     

     

Inline 行內元素

行內元素，元素內容會直接放置在文字行列當中，與周圍內容並排顯示。

.item {
  display: inline;
}

1. 不會主動換行：inline 元素會跟其他 inline 元素排在同一行上。

   • 通常用於文章段落中需要強調的文字、不同顏色的文字或超連結等情況。

     .item {
       display: inline;
       border: 1px solid #000; /* 邊框 */
     }
     

     

2. 無法設定寬度、高度：就算寫了 width 和 height 也沒有作用。

   • 當發現設定寬高無效的時候，可以注意一下是不是用到行內元素。像是使用連結 <a> 就很容易遇到這個問題！

     .item {
       display: inline;
       border: 1px solid #000;
       width: 100px;           /* 寬度無效 */
       height: 200px;          /* 高度無效 */
     }
     

     

3. 寬度、高度依據內容而定：元素的寬度取決於其內容的多寬，就像普通文字一樣。當內容超過容器寬度時，會自動換行到下一行。

   • 當 block 元素父元素 .nav 寬度設定為 120px，內部子元素 .item 超出容器寬度會自動換行。

     .nav {
       border: 1px solid #000; /* 邊框 */
       padding: 2px;           /* 內部間距 */
       width: 120px;           /* 寬度 */
     }
     
     .item {
       display: inline;
       border: 1px solid #000; /* 邊框 */
     }
     

     

4. 支援元素內部間距，但僅影響視覺呈現：inline 元素可以設定內部間距 padding，視覺上會看到內部空間被撐開。但在版面中，元素實際佔據的高度仍然是文字行高，因此改變內部間距，並不會改變整體文字流的排列。

   • 雖然 padding 會視覺上擴大元素，但不會推開上下的其他內容，可以使用 line-height 調整文字行高。

     .nav {
       border: 1px solid #000; /* 邊框 */
       padding: 2px;           /* 內部間距 */
       width: 220px;           /* 寬度 */
     }
     .item {
       display: inline;
       border: 1px solid #000;
       padding: 20px;          /* 內距有效 */
     }
     

     .nav {
       border: 1px solid #000; /* 邊框 */
       padding: 2px;           /* 內部間距 */
       width: 220px;           /* 寬度 */
     }
     .item {
       display: inline;
       border: 1px solid #000;
       padding: 20px;          /* 內距有效 */
       line-height: 56px;      /* 行高 */
     }
     

     

5. 不支援上下方向的元素外部間距，僅支援左右方向：inline 元素只能設定左右方向的外部間距 margin，上下方向則無效。

   • 當一堆文字使用 <sapn> 等標籤來放文字，可以利用左右 margin 來微調間距。（就不要使用空格去空出間距喔！）

     .item {
       display: inline;
       border: 1px solid #000;
       margin: 10px;           /* 外距左右有效，上下無效 */
     }
     

     

Inline-Block 行內區塊元素

行內區塊元素，結合了 inline 和 block 兩者的優點。

.item {
  display: inline-block;
}

1. 不會主動換行：跟 inline 元素一樣，inline-block 元素會跟其他具 inline 效果的元素排在同一行上。

   .item {
     display: inline-block; 
     border: 1px solid #000; /* 邊框 */
   }
   

   

2. 能夠設定寬度、高度：跟 block 元素一樣，可以透過 CSS 的 width 和 height 屬性來調整元素大小。

   • 可以將 .item-1、.item-2、.item-3 設定不同的尺寸，當元素需要換行時，不同於 inline 元素只會讓部分文字換到下一行，inline-block 元素會整塊移至下一行。

   • inline-block 元素有著可以改變尺寸與不會換行的特性，很適合製作導航選單、按鈕組等水平排列的排版。

     .item {
       display: inline-block;
       border: 1px solid #000;
     }
     
     .item-1 {
       width: 60px;
     }
     .item-2 {
       width: 120px;
     }
     .item-3 {
       width: 100px;
       height: 80px;
     }
     

     

3. 支援元素內部與外部間距：跟 block 元素一樣，可以設定元素內部間距 padding 跟外部間距 margin，且上下左右四個方向都可以設定，不像 inline 元素會出現視覺呈現與實際佔據空間不同的問題。

   .item {
     display: inline-block;
     border: 1px solid #000;
     padding: 8px; /* 內距 */
     margin: 4px;  /* 外距 */
   }
   

   

4. 預設對齊文字基線：多個 inline-block 元素會自動對齊文字的基準線。

   • 當 .item-1、.item-2、.item-3 設定不同的尺寸或字體大小時，可以利用 vertical-align 調整對齊方式，預設為 baseline 對齊基線，還可以設定對齊上 top、中 middle、下 bottom 。

   • vertical-align 只對 inline、inline-block 和表格單元格元素有效，block 則無效。

     .item {
       display: inline-block;
       border: 1px solid #000;
       vertical-align: baseline; /* 對齊文字基線（預設） */
     }
     .item-1 {
       font-size: 12px;
     }
     .item-2 {
       font-size: 20px;
     }
     .item-3 {
       font-size: 16px;
     }
     

     

     

補充：inline / inline-block 元素之間會出現空白間距

在 HTML 程式碼中，只要程式碼有換行，瀏覽器就會自動產生一個「空白」字元。

以上面範例為例，<span> 預設為 inline 元素，因此「這是一段」與「範例文字」之間就會存在一格空格。

1. 解決方法 1：HTML 不要換行，就不會產生「空白」字元。（但不建議這個方式）

   <p class="text">
   	<span>這是一段</span><span>範例文字</span>
   </p>
   

2. 解決方法 2：將 inline、inline-block 元素的父容器設定 font-size: 0，然後在子元素再重新設定字體大小即可。

   p.text {
     font-size: 0; /* 消除空白 */
     span { 
     	font-size: 16px; /* 恢復字體大小 */
     } 
   }
   

   

None 隱藏元素

用來隱藏元素顯示的一種顯示方式。

.item {
	 display: none;
}

1. 完全隱藏元素，且不佔據空間

   • 將 .item-2 設定 display: none; 後，該元素會完全隱藏，且不會佔據任何空間。

     

2. 經常用於條件性顯示：此顯示方式常見於響應式設計中，可根據特定螢幕尺寸隱藏元素，或配合 JavaScript 實現動態顯示/隱藏功能。

   • 以下使用的響應式設計作為範例，.item 設定為 block 顯示方式，但是在螢幕寬度小於或等於 768px 時，將元素設定為 none 隱藏，適合在手機版網頁中減少不必要的內容顯示。

     .item {
     	display: block;
     }
     
     /* 螢幕寬度 ≤ 768px 套用 */
     @media (max-width: 768px) {
       .item {
         display: none;
       }
     }
     

是否有佔據空間的隱藏方式？

使用 display: none; 可以完全隱藏元素且不佔據排版空間。但我們是否有方法能隱藏元素同時保留它佔據的空間呢？

1. 解決方法 1：可以從元素外觀著手，例如將元素透明度設為 0，或是將顏色調整為透明。這樣可以在視覺上隱藏元素，但元素仍可被使用者互動。

   .item {
     opacity: 0;              /* 完全透明 */
     color: transparent;      /* 透明文字顏色 */
     background: transparent; /* 透明背景顏色 */
   }
   

2. 解決方法 2：使用 visibility: hidden; 來隱藏元素，元素仍會佔據空間，且不會被使用者互動到。

   .item {
   	visibility: hidden; /* 隱藏但仍佔空間 */
   }
   

總結

今天詳細介紹了 CSS 中 display 屬性的各種顯示方式，包含 block、inline 到 inline-block 和 none 等顯示模式，將這四種顯示方式與用途，總結如下表：

掌握以上顯示方式後，你將能夠靈活運用 display 屬性控制元素排版，更有效率地為元素套用合適的顯示屬性。

今天的內容好像比較長，很高興你能看到第五天！！感謝大家～ (๑╹◡╹๑)