---
# System prepended metadata

title: 容器的特性 - 行內元素 ＆ 各種範例
tags: [HTML、CSS]

---

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

### 行內元素的特性:

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



---


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


1. a 連結:


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

2. span:

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

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

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


- h1 是區塊元素:

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

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

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

```
h1 {
    display: inline;
    background: gray;
}
```
![](https://i.imgur.com/YY8ajuC.png)


### 結語:

1. 由於課程不太可能會教學完全部的 HTML 標籤元素
   所以在遇到新學到的標籤，要如何快速知道這個標籤元素特性是什麼?
   
   
2. 直接對該元素設定背景顏色來觀察
   
   
- 是否佔據一整行? -- 區塊元素
- 背景顏色會根據實際元素內容長寬一樣? -- 行內元素


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