---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day13 - container 概念"
tags: [30 天軟體工程師體驗營｜2025]

---

---
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 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

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

<!-- 

解答：
.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]() |
-- >