---
# System prepended metadata

title: display
tags: [css]

---

---
tags: css
---

# display 

### display: block ==區塊元素==

#### 區塊元素 特性

* 盡可能佔滿整個版面。
* 如果寬有限制他還是會另起一行來呈現。

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

* 若在a連結就沒有區塊元素，無法占滿整個網頁

```htmlembedded=
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia consequatur magni, placeat quibusdam unde
        voluptate nemo fuga, adipisci cupiditate quidem, dolores maxime praesentium accusantium culpa est! Quia aliquid
        accusamus corporis?</p>
    <ul>
        <li>123</li>
        <li>456</li>
    </ul>
    <a href="">aa</a>
    <a href="">bb</a>
```
![](https://i.imgur.com/ufHFkAu.png)

### display: inline; ==行內元素==

#### 行內元素 特性

* 通常用來點綴用。
* 沒辦法去設定寬跟高 (除非轉回區塊元素)

```htmlembedded=
 <p>Lorem ipsum dolor sit <a>123</a>amet consectetur adipisicing elit. Officia consequatur magni, placeat quibusdam
        unde
        voluptate nemo<span>345</span>> fuga, adipisci cupiditate quidem, dolores maxime praesentium accusantium culpa
        est!
        Quia aliquid
        accusamus corporis?</p>
```
![](https://i.imgur.com/3KSAoe9.png)
