# CSS 24. Display屬性設定 / block & inline

### 嘗試在 anchor tag 設定長寬:

- 初始 code

<a class="link" href="#">
  我是一個連結
</a>

a.link {
  color: cornsilk;
  background-color: rgb(0,5,255);
}


- CSS 增加 `width` , `height` 試試看會有什麼狀況:

a.link {
  width: 500px;
  height: 400px;
  color: cornsilk;
  background-color: rgb(0,5,255);
}

- 而你會發現，什麼也沒變化。

這邊就牽涉到我們章節的主題:

### display 屬性

#### inline

- 打開網頁，右鍵選擇檢查: 點擊我們的 `a` 連結。

會發現，有一個地方叫做 display: inline

- 什麼是 inline ? **inline** 實際上就是根據該 elements
本身所帶出來的長寬來呈現樣式，並且不能夠做出使用者設定

// inline 無法自行設定長寬等屬性。

#### block

- 如果要自行設定長寬的話，則可以使用

// blcok 可以有自己的寬高，並且會佔據一整行。

display: block;

- ex:

a.link {
  display: block;
  width: 500px;
  height: 400px;
  color: cornsilk;
  background-color: rgb(0,5,255);
}


- 故 inline & block 之間的差異就是這樣。

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - other`