---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - RWD - 伸縮自如的 RWD 排版術
>
# 🏅 切版任務 Day13 - container 概念

## Container 是什麼？
在網頁排版中，「container（容器）」是一個非常常見的概念，它就像是一個頁面內容的框架或邊界，用來控制裡面內容的寬度、對齊與間距，是建立整齊美觀網頁的基礎。

## 為什麼要使用 container？
如果沒有 container，網頁的內容會直接緊貼在螢幕邊緣，看起來非常擁擠、難以閱讀。而 container 的角色，就是幫我們：
1. 限制最大寬度，避免內容太寬
2. 對齊整體內容區塊
3. 給出合理的左右留白（padding / margin）
4. 做為 RWD（響應式設計）中的主要版面架構容器

<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 Bootstrap icon 引入題目" src="https://codepen.io/yen-kg/embed/VYwJOpg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/VYwJOpg">
每日任務 - 🏅 Bootstrap icon 引入題目</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Container 與 RWD 的關係
.container 是響應式設計中非常重要的「基礎排版單位」
例如 BootStrap 就是根據不同裝置寬度，自動設定 .container 的 max-width，
可以[參考 BootStrap 官方](https://bootstrap5.hexschool.com/docs/5.0/layout/containers/)。

透過這樣的設計，確保閱讀舒適、內容集中、畫面整齊 ～
而通常也會加上左右內距 padding（基本上是 16px）

當畫面滿版時，這時 .container 會提供左右內距
（padding-left / right: 16px）來避免內容貼邊。

可以參考下面的範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 container 概念範例 - 1" src="https://codepen.io/yen-kg/embed/XJJrprE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/XJJrprE">
每日任務 - 🏅 container 概念範例 - 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/XJWLwgV) 模板，並且修改 .container 符合以下條件：
1. 最大寬度為 960px
2. 在畫面中水平置中
3. 內距為左右各 16px

## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
}
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:------------:|:-----------------------------------------------------------------:|
|1|小趴|[Codepen](https://codepen.io/papa2415/pen/JooxGyR)|
|2|JHT|[Codepen](https://codepen.io/juanht/pen/QwwYyMY)|
|3|dean|[Codepen](https://codepen.io/ch933114/pen/xbbMZpE)|
|4|Hank_08123|[Codepen](https://codepen.io/hankyang1213/pen/qEEgbVR)|
| 5 | 7Lun | [Day13-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/raaPxJV) |
|6|iris175|[Codepen](https://codepen.io/ypfttckg-the-looper/pen/bNNzEMO)|
| 7 | akkk | [Codepen](https://codepen.io/ak-wu-the-decoder/pen/bNNzEjz) |
| 8 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/jEEdWvj) |
| 9 | 随縁 | [Codepen](https://codepen.io/zuien/pen/azzXdQp) |
| 10 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/vEEbLwj?editors=0100) |
| 11 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/zxxerXo) |
| 12 | DD | [Codepen](https://codepen.io/dorihung/pen/myyvVgj) |
| 12 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/RNNvare) |
| 13 | B | [Codepen](https://codepen.io/Babel777/pen/pvvGyPb) |
| 14 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/ZYYwWye) |
| 15 | Joseph_Kyuu | [Codepen](https://codepen.io/iqpkfikf-the-sasster/pen/xbbMVLY) |
| 16 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/QwwYNMy) |
| 17 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/dPPaMZg) |
| 18 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/azzXdJd) |
| 19 | connieK8888 | [Codepen](https://codepen.io/eaksloky-the-sans/pen/VYYgaXq)|
| 20 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/oggmxOm)|
| 21 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/emmxzOV)|
| 22 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/jEEdrEw) |
| 23 | Ali | [Codepen](https://codepen.io/Alicia1117/pen/azzXZZP) |
| 24 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/KwwJMNy) |
| 25 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/yyyZOdo) |
| 26 | 青蛙 | [Codepen](https://codepen.io/Jennie_yang/pen/ZYYwOaM) |
| 27 | Owen He | [Codepen](https://codepen.io/owen1120/pen/LEEqZXE) |
| 28 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/oggmLOb) |
| 29 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/YPPBGzp) |
| 30 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/YPPBGWZ) |
| 31 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/XJJOjRJ) |
| 32 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/Eaargeg?editors=1100) |
| 33 | 馬德 | [Codepen](https://codepen.io/maywang/pen/yyyZVee?editors=1100) |
| 34 | 林明德 | [Codepen](https://codepen.io/lwescocn-the-vuer/pen/bNNzBzp) |
| 35 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/MYYLJZz) |
| 36 | Klaus Chen | [Codepen](https://codepen.io/Klaus-Chen/pen/jEEdyEm) |
| 37 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/WbbPrXP) |
|38|蛋殼|[Codepen](https://codepen.io/weybrian/pen/qEEgjpz)|
| 39 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/myyvMJm)|
| 40 | ggininder | [Codepen](https://codepen.io/wei900221/pen/KwwJvMb)|
| 41 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/zxxeENz?editors=1100) |
| 42 | Jane | [Codepen](https://codepen.io/jkmx/pen/NPPoaxQ) |
| 43 | Yi-Kuei| [Codepen](https://codepen.io/Yi-Kuei-Chuang/pen/GggzMKX) |
| 44 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/RNNvLyd) |
| 45 | carrie0416 | [Codepen](https://codepen.io/Hong-Carrie/pen/VYYgMQE) |
| 46 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/vEEbezP) |
| 47 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/XJJOeLE) |
| 48 | aka | [Codepen](https://codepen.io/gfbmnvas-the-animator/pen/MYYLOoG) |
| 49 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/OPPdOvW) |
| 50 | Orligege | [Codepen](https://codepen.io/S-Tung/pen/wBBNpWm) |
| 51 | Peggy | [Codepen](https://codepen.io/cpt23462599/pen/PwwVEVd) |
| 52 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/KwwJovy) |
| 53 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/GggzxaW?editors=1100) |
| 54 | yang |[codepen](https://codepen.io/Yang-J/pen/oggmdaw?editors=1100)|
| 55 | Leonard |[codepen](https://codepen.io/hyyfjqra-the-sans/pen/qEEgyLW)|
| 56 | 加菲 | [Codepen](https://codepen.io/DOU-CF/pen/NPPoBpp) |
| 57 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/KwwJrQZ) |
| 58 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/myyvEYW) |
| 59 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/vEEbbBR?editors=1100) |
| 60 | pastor | [Codepen](https://codepen.io/peter_hung/pen/vEEbbEj) |
| 61 | Toung | [Codepen](https://codepen.io/Toung/pen/MYYLLwa)
| 62 | Aoi | [Codepen](https://codepen.io/zching07/pen/oggmmyM)
| 63 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/gbbZqbq) |
| 64 | Aidd. |[Codepen](https://codepen.io/aiddchen/pen/VYYgNRM) |
| 65 | Michael - 鴿子 | [Codepen](https://codepen.io/KeinSacer_Michael/pen/gbbqLoN) |
| 66 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/zxxeVKa) |
| 67 | 牛奶 | [Codepen](https://codepen.io/0omilko0/pen/pvvYvzZ?editors=1100) |
| 68 | leo_tzou | [Codepen](https://codepen.io/JH_Portfolio/pen/GggepXZ) |
| 69 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/NPPoGZM) |
| 70 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/YPPgEZb) |
| 71 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/JooxeLq) |
| 72 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/VYYNzNP)|
| 73 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/XJJQerW)|
| 74 | 阿龍 | [Codepen](https://codepen.io/Nemo-Lin/pen/XJJQzOY) |
| 75 | CBK | [Codepen](https://codepen.io/BK-C-the-styleful/pen/MYYRVXv) |
| 76 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/dPPENNK?editors=1100) |
| 77 | ja4071 | [Codepen](https://codepen.io/SHAO-L/pen/xbboyqK)
| 78 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/emmqZKo)
| 79 | ArvinSu | [Codepen](https://codepen.io/Arvin-Su/pen/Qwwepmd) |
| 80 | melody08 | [Codepen](https://codepen.io/Xuan-han-Chen/pen/PwwMQWW) |
| 81 | vima | [Codepen](https://codepen.io/chin7004/pen/raaXKVZ) |
| 82 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/emmqZKo) |
| 83 | kelsonhouse |[Codepen](https://codepen.io/Kelson-House/pen/QwbWrWP)|
| 84 | 木乃伊 Kimi | [Codepen](https://codepen.io/veqjtzdb-the-lessful/pen/zxGxGEj) |
| 85 | kent_31665 | [Codepen](https://codepen.io/kentlee406/pen/OPVMpyW) |
| 86 | Lynn | [Codepen](https://codepen.io/Yen-Ling-Peng/pen/wBaGmbM?editors=1100) |
| 87 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/GgJNVWP) |
| 88 | Astrid | [6/6](https://codepen.io/astrid321654/pen/myJwVZL) |
| 89 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/RNPJYzJ) |
| 90 | Waynetrece | [Codepen](https://codepen.io/waynetrece/pen/gbpjRrb) |

<!--【快速複製】
| num | user | [Codepen]() |
-- >