---
# System prepended metadata

title: 'DAY4 - 區塊元素的介紹 - display: block;'
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章']

---

# DAY4 - 區塊元素的介紹 - display: block;

### 於 HTML 中最重要的特性之一，區塊元素是什麼?

- 開門見山，首先看到這段code 與畫面:
  容器的特性很重要，HTML 要寫得好，基本的元素特性必須搞懂。



```
    <h1>區塊元素1</h1>
    <h1>區塊元素2</h1>
    <a href="#">行內元素1</a>
    <a href="#">行內元素2</a>
```


---

![](https://i.imgur.com/F7VbeH3.png)

- 從此圖，我們可以發現一個問題，那就是:

```
  h1 會把下一個 h1 推擠下一行。
  a連結卻可以正常並排，原因是為什麼?
```

- 這也是區塊元素的特性之一，**自動佔滿一整行**。

### 如何分辨是否為區塊元素?

1. 打開瀏覽器，右鍵: 檢查 

2. 確認該標籤的屬性欄: **display**

   大概可以看得到這個地方: `display: block;` 這就是區塊元素的意思。
   
3. 也可以透過瀏覽器工具 - **computed**  直接透過**縮放瀏覽器**
   來觀察 h1 是否有跟著縮放大小，驗證 h1 區塊元素的特性
   
![](https://i.imgur.com/Z0poTr7.png)

---

### 套用 background，更快速辨識區塊、行內元素的特性:

```
h1,
a {
  margin-bottom: 10px;
  background: green;
  color: white;
}
```
- 聰明的你，應該更容易辨識誰才是區塊元素了吧 :D

![](https://i.imgur.com/qKF1PDI.png)

- 當然，還是有很多標籤都含有不同的特性，這些都不需要去死記硬背，透過加入背景顏色效果，並且記住，`display: block`; 就是**區塊元素**。

- 而**區塊元素**，最大的特性，就是根據瀏覽器當下的大小，直接**佔據一整行**。

  下一個元素會被自動推到下一行，無論你怎麼更改元素的寬度亦是。


---

- [延伸學習-各種區塊元素有哪些?](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)

   
###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章` 