# 容器的特性 - 行內元素 ＆ 各種範例

### 行內元素的特性:

- 最最最基礎的觀念，就是不會佔據一整行
- 元素長寬只會跟隨元素本身大小本身，是無法將其改變的
- 除非將**元素的顯示方式** -- `disply:` 改成 `block;`

---

### 行內元素標籤範例：

1. a 連結:

<a href="#">連結</a>

2. span:

span 本身不具備任何語意，是用來點綴元素用的行內標籤

    <p>
        <span>今天</span>天氣真好 ，我透過學習獲得了很多的知識
    </p>
    
    
    // css:
    
    span {
    color: red;
    font-size: 30px;
}

### 將區塊元素改成 inline:

- h1 是區塊元素:


    <h1>
        標題一
    </h1>
    <h1>
        標題二
    </h1>
    
    // css:
    h1 {
    background: gray;
}

- 若 h1 添加了 display: inline，則可以變成行內元素特性了

h1 {
    display: inline;
    background: gray;
}


### 結語:

1. 由於課程不太可能會教學完全部的 HTML 標籤元素
所以在遇到新學到的標籤，要如何快速知道這個標籤元素特性是什麼?

2. 直接對該元素設定背景顏色來觀察

- 是否佔據一整行? -- 區塊元素
- 背景顏色會根據實際元素內容長寬一樣? -- 行內元素

###### tags: `HTML、CSS`