---
# System prepended metadata

title: "\U0001F3C5 Day 5 - margin、padding 混合運用"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 5 - margin、padding 混合運用

### margin
調整元素外邊距，向外推出元素與元素之間的間距、留白。
示意圖：
![](https://i.imgur.com/6CQvmHv.png)

### padding 
調整元素內邊距，向內推出外層與內層元素之間的間距、留白，或是 border 與元素內容之間的留白。
示意圖：
![](https://i.imgur.com/uTN5G5c.png)

### 題目
請運用上方規則，調整此 [CodePen](https://codepen.io/hexschool/pen/VwQOZbL?editors=1100)，並讓推擠方向一致。
（**只能更改 HTML 區塊，修改間距**（pt-1、pb-1、px-1、mt-1、mb-1）的設定）

（提示：會運用到的 class：.mt-1/.mb-1 、.p-1）

示意圖：
![](https://i.imgur.com/uJdixbN.png)


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：
https://codepen.io/hexschool/pen/VwQOZgK
-->

回報區
---

|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1 | nora_zizi| [Codepen](https://codepen.io/Nora-Ch/pen/ZYGqLmX?editors=1100)|
|2|Saika|[Codepen](https://codepen.io/saika4501/pen/bNdmgze?editors=1100)|
|3|Jenna|[Codepen](https://codepen.io/abiscc14/pen/NPqOder)|
|4|Hank_08123|[Codepen](https://codepen.io/hankyang1213/pen/QwbZdod)|
|5|Esther|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/emNPgwV?editors=1100)|
|  5  | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/raVqjXv)|
|  6  | jchunnn | [Codepen](https://codepen.io/jchunnn/pen/Wbvapep)|
|  7  | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/qEdJrdv?editors=1100)|
|  8  | RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/bNdmqdg?editors=1100)|
|  9  | Klaus Chen  |[Codepen](https://codepen.io/Klaus-Chen/pen/NPqOpNj?editors=1100)|
|  10 | Jerome  |[Codepen](https://codepen.io/qsc002163/pen/Pwqypzz?editors=1100)|
|  11 | Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/ZYGqeYx)|
| 12 | Calvin|[Codepen](https://codepen.io/CalvinChang/pen/ZYGqeOo?editors=1100)|
| 13 | 社子畢卡索(Lu) |[Codepen](https://codepen.io/pen?template=Wbvapzd)|
| 14 | Joseph_Kyuu  |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/VYLEpBe)|
| 15 | 那個貓貓  |[Codepen](https://codepen.io/zorakao/pen/bNdmqma)|
| 16 | pastor  |[Codepen](https://codepen.io/peter_hung/pen/PwqypXj)|
| 17 | Hugh  |[Codepen](https://codepen.io/Hugh-Chen/pen/JodmJPr?editors=1100)|
| 18   | Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/ZYGqybp)| 
| 19   | 老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/GgJYEpP)| 
| 20   | 柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/raVqwEd?editors=1100)| 
| 21   | JiaMori  |[Codepen](https://codepen.io/jiamori/pen/JodmrNK)|
| 22   | cks40660  |[Codepen](https://codepen.io/CKS40660/pen/WbvaZVV)| 
| 23   | 小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/vEOVeGm)|
|  24  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/OPVBOwJ)|
|  25  |  suemma  |[Codepen]([作業網址放這邊](https://codepen.io/suemma/pen/ZYGqvEr))|
|  26  |  随縁  |[Codepen](https://codepen.io/anki0072011/pen/emNPyYM?editors=1100)|
|  27  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/dPogJMB)|
|  28  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/KwpGZvQ)|
| 29  | Sam.S.T.Y  | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/RNPeQrg?editors=1100)
|  30  | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/zxGmRqY?editors=1100)|
|  30  | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/azORqwd)|
|  31  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/NPqOywE?editors=1100)|
|  32  |  TY  |[Codepen](https://codepen.io/Ted-Y/pen/PwqyQBB?editors=1100)|
|  33  |  Mumu  |[Codepen](https://codepen.io/ztz_mu/pen/RNPeMbB)|
|  33  |  Zin  |[Codepen](https://codepen.io/hexschool/pen/VwQOZbL?editors=1100)|
|  34  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/ByNqrpg)|
|  35  |  Zhi  |[Codepen](https://codepen.io/aneeiitk-the-typescripter/pen/pvJxLQe)|
|  36  |  Kiku  |[Codepen](https://codepen.io/Li-Kusa/pen/xbGyXJg)|
|  37  |  Sylvie  |[Codepen](https://codepen.io/shuping-xiao/pen/OPVBvKy?editors=1100)|
|  38  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/wBaYjpd?editors=1100)|
|  39  |  Yanchen16  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/YPXJBxQ)|
|  40  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/PwqxwKz)|
|  41  |  Hao  |[Codepen](https://codepen.io/Howell/pen/myJQJdR)|
|  42  |  Satar  |[Codepen](https://codepen.io/SatarKuo/pen/xbGQGZb?editors=1100)|
|  43  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/YPXRXaQ)|
|  44  |  cbs9007  |[CodePen](https://codepen.io/wasdjk/pen/jEPQPXo?editors=1100)|
|  45  |  ahga  |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/KwprzOO?editors=1010)|
|  46  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/NPqERgp?editors=1100)|
|  47  |  Celia  |[Codepen](https://codepen.io/hexschool/pen/VwQOZbL?editors=1100)|
|  48  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/dPoQNGJ?editors=1100)|
|  49  |  Eagle Huang  |[Codepen](https://codepen.io/YuCi/pen/EajOEQX)|
|  50  |  Peggy  |[Codepen](https://codepen.io/Peggy_C/pen/NPqEOoE)|
|  51  |  Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/emNQBjY)|
|  52  |  立花  |[Codepen](https://codepen.io/kj25940858/pen/PwqXqoW?editors=1100)|
|  53  |  zhe  |[Codepen](https://codepen.io/dotheright/pen/JodwXqK)|
|  54  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/WbvLprr?editors=1100)|
|  55  |  Yan*  |[Codepen](https://codepen.io/Yan-L/pen/WbvLMpd?editors=1100)|
|  56  |  Space key  |[Codepen](https://codepen.io/uuajlwse-the-selector/pen/wBaREJa)|
|  57  | kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/ZYGVqVZ?editors=1100)|
|  58  | Geno Chen  |[Codepen](https://codepen.io/kai-chen-the-sans/pen/pvJqXMg)|
|  59  | 孟  |[Codepen](https://codepen.io/Mengru0503/pen/GgJPPVp)|
|  60  | 西娜  |[Codepen](https://codepen.io/Sheena-the-encoder/pen/JodmWox?editors=1100)|
|  61  |  NellyGuo  |[Codepen](https://codepen.io/NNN-the-selector/pen/yyNZooV?editors=1100)|
|  62  |  Michelle  |[Codepen](https://codepen.io/bastar_dize/pen/WbvPJeV)|
|  63  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/GgJemvp)|
|  64  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/LEVaLzZ)|
|  65  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/pvJYrvz)|
|  66  |  加菲  |[Codepen](https://codepen.io/DOU-CF/pen/NPqJXWJ?editors=1100)|
|  67  |  Alyssa  |[Codepen](https://codepen.io/AlyssaYen/pen/dPormbo?editors=1100)|
|  68  |  teresa  |[Codepen](https://codepen.io/teresa150029/pen/ogXVQmZ)|
|  69  |  Fang  |[Codepen](https://codepen.io/Fang-the-encoder/pen/myJoovq?editors=1100)|
|  70  |  NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/yyNryaL)|
|  71  |  tanuki_狸貓  |[Codepen](https://codepen.io/tanuki320/pen/XJbQMOR?editors=1100)|
|  72  |  Scrooge  |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/qEdwjqW?editors=1100)|
|  73  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/ZYGZMLY)|
|  74  |  Stanley  |[Codepen](https://codepen.io/Stanley-Chang-the-flexboxer/pen/JodqPQx)|
|  75  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/gbpJwOX?editors=1100)|
|  76  |  Zong  |[Codepen](https://codepen.io/BAY71/pen/RNPmMxa?editors=1100)|
|  77  |  PAgaNiNi  |[Codepen](https://codepen.io/PA-OTTER/pen/PwqrRLW)|
|  78  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/zxGgGmz)|
|  79  |  World  |[Codepen](https://codepen.io/HexschoolVuePujols/pen/WbvVreZ)|
|  80  |  李大維  |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/wBaVdGQ?editors=1100)|
|  81  |  Antonio  |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/VYLoEgx)|
|  82  |  Bee  |[Codepen](https://codepen.io/Bee-Lu/pen/LEpPvXY)|
|  83  | Ching | [Codepen](https://codepen.io/huangching/pen/raOBEPY) |
|  84  |  伊迪  |[Codepen]([作業網址放這邊](https://codepen.io/eku10rei/pen/ZYbEXNY?editors=1100))|
|  85  |  Mini  |[Codepen](https://codepen.io/miiinii32-Cheng/pen/gbaOEyJ?editors=1000)|
|  86  |  B  |[Codepen](https://codepen.io/Babel777/pen/GgpRaKj?editors=1100)|
|  87  |  雅潔  |[Codepen](https://codepen.io/MOMOYA/pen/ByoNoQP)|
|  88  |  Fancy  |[Codepen](https://codepen.io/Fancy-the-lessful/pen/zxvGxGz?editors=1100)|
|  89  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/gbapvJR)|
| 90 | water | [Codepen](https://codepen.io/wateruby/pen/emppmxG)|
| 91 | Lucy | [Codepen](https://codepen.io/Lucytrycode/pen/EaVVMyB)|
|  92  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/pvjgeez)|
|  93  |  cheryl|[Codepen](https://codepen.io/katrina-the-decoder/pen/MYaKVdd?editors=1100)|
|  94  |  cindy|[Codepen](https://codepen.io/a50134/pen/NPGNKpG)
|95|小趴|[Codepen](https://codepen.io/papa2415/pen/xbwVdwP)|
|  96  |  阿鍋|[Codepen](https://codepen.io/YING-TING-KUO/pen/pvjbJXP)
|  97  |  KOMATSU PEI|[Codepen](https://codepen.io/Komatsu2021/pen/gbaMEpY?editors=1100)
|  98  |  Va  |[Codepen](https://codepen.io/lichenValin/pen/qEOaxwx)|
| 99 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/xbwRZjK)|
| 100 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/MYaJpBX?editors=1100)|
| 101 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/myeRgwd?editors=1100)|
| 103 | Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/bNVWeEx?editors=1100)|
| 104 | Midy Wu | [Codepen](https://codepen.io/work-wu/pen/MYaowvV)|
| 105 | 4ping | [Codepen](https://codepen.io/928Libra/pen/raOvJpg)|
| 105 | 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/myeaLyP?editors=1100)|


<!-- |  編號  |  名稱  |[Codepen](作業網址放這邊)| -->

