---
# System prepended metadata

title: "\U0001F3C5 Day 5"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 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?editors=1100 -->

回報區
---


|      Discord      | CodePen / 答案                                                              |
|:-----------------:|:--------------------------------------------------------------------------- |
|     Anna Liu#3794      | [Codepen](https://codepen.io/anna618/pen/vYRyMrp)             |
|     小鐵#2814      | [Codepen](https://codepen.io/xiron/pen/vYRKrEw?editors=1100)             |
|     int#7518      | [Codepen](https://codepen.io/intHuang/pen/KKowQGp?editors=1100)             |
|    Clara#1275     | [Codepen](https://codepen.io/bsupixqu/pen/xxWbyzr)                          |
|    布魯諾#7239    | [Codepen](https://codepen.io/bruno-yu/pen/WNzbayV?editors=1100)             |
|      YC#2522      | [CodePen](https://codepen.io/YCLu/pen/KKowGBw)                              |
|    鎔瑄 #8578     | [Codepen](https://codepen.io/barbarayou/pen/GRxgYQX)                        |
|     zera#6060     | [         ](https://codepen.io/zera-tseng/pen/GRxgYXY)[Codepen]()           |
|  StellaHsu#2687   | [Codepen](https://codepen.io/stella950114/pen/PoRwyyV?editors=1100)         |
|    Benson#6763    | [Codepen](https://codepen.io/kumashow/pen/xxWbyBX)                          |
|    IreneY#0086    | [Codepen](https://codepen.io/HalfPlannedJourney/pen/oNqgaQE)                |
|     大衛#4869     | [CodePen](https://codepen.io/exnsrpjc/pen/ExEadrX?editors=1100)             |
|     𝓛𝓊𝒸𝓎#8635     | [CodePen](https://codepen.io/lucygirl/pen/jOzEeoP)                          |
|     洋蔥#5295     | [CodePen](https://codepen.io/HSUNA/pen/NWYPOmK?editors=1100)                |
|  Karol-Kuo#5287   | [CodePen](https://codepen.io/ting-yu-kuo/pen/qBoEJex)                       |
|  Andy Hung#3335   | [CodePen](https://codepen.io/andyhung0723/pen/JjLomqM)                      |
| TsaiMinChun #8285 | [CodePen](https://codepen.io/Tsai0926/pen/wvmBYVV?editors=1100)             |
|  Ming Juan #0071  | [CodePen](https://codepen.io/M-Juan/pen/poLvQjE)                            |
|     威0 #6919     | [CodePen](https://codepen.io/n0918679182/pen/rNdaQxw)                       |
|    連小艾#0791    | [CodePen](https://codepen.io/bolaslien/pen/vYREQKb?editors=1100)            |
|     逸川#6319     | [CodePen](https://codepen.io/bryanlin8911/pen/oNqgQLP)                      |
|     瑞瑞#4605     | [CodePen](https://codepen.io/tsai-li-ting/pen/KKowrgg)                      |
|    peter.chen#    | [CodePen](https://codepen.io/JIAN-RONG/pen/KKowraN?editors=1100)            |
|   Amberhh#2465    | [CodePen](https://codepen.io/Amberhh/pen/yLKyQgM?editors=1100)              |
|  LHchien33#6232   | [CodePen](https://codepen.io/lin_chien/pen/PoRwxKo)                         |
|    黑白兔#0684    | [CodePen](https://codepen.io/johnny329/pen/BaryGwN)                         |
|     Chi#7605      | [Codepen](https://codepen.io/YoChi84/pen/PoRwxEw)                           |
|  PeggyLiao#1552   | [CodePen](https://codepen.io/PeiJu-Liao/pen/NWYPEXr?editors=1100)           |
|     威爾#1694     | [CodePen](https://codepen.io/WILL_Wu/pen/YzaPRYM)                           |
|  Winnie Wu #5468  | [CodePen](https://codepen.io/Pooh-Wu/pen/rNdaQpp?editors=1100)              |
|   ajhappy#6488    | [CodePen](https://codepen.io/ajhappy5438/pen/ZExYmoa)                       |
|     yuyu#6310     | [CodePen](https://codepen.io/yuyu0905/pen/JjLoeMa?editors=1100)             |
|    阿基基#2557    | [CodePen](https://codepen.io/JIJI_GNI/pen/BaryGJo)                          |
|  jin.huang#4666   | [CodePen](https://codepen.io/ruby828387/pen/jOzEQXw?editors=1100)           |
|    阿泡泡#7881    | [CodePen](https://codepen.io/Apaopao/pen/mdxyQzd)                           |
| Kyle, Chuang#1892 | [CodePen](https://codepen.io/hohayo/pen/VwXYVVJ)                            |
|     小白#2406     | [Codepen](https://codepen.io/gracewhite/pen/mdxyQgJ)                        |
|    楓之聲#6945    | [CodePen](https://codepen.io/sshane258/pen/PoRwXKm)                         |
|     艾草#4830     | [Codepen](https://codepen.io/jmkhsutp/pen/MWVYZrz?editors=1100)             |
|     群嘉#3943     | [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/GRxgPxm?editors=1100) |
|     hua#9099      | [Codepen](https://codepen.io/LHua/pen/RwMNEJK?editors=1100)                 |
| Erichooojop#8199  | [CodePen](https://codepen.io/lumedkle/pen/WNzbLay?editors=1100)             |
|     得源#8355     | [CodePen](https://codepen.io/aglgvsie/pen/JjLoxjK)                          |
|    fatni#5464     | [CodePen](https://codepen.io/articlelife1224/pen/VwXYVLE)                   |
|   NeilLin#3009    | [CodePen](https://codepen.io/a0071421/pen/oNqgmNB?editors=1100)             |
|    Chaoci#2460    | [CodePen](https://codepen.io/gmailchao/pen/vYREbXW?editors=1100)            |
|     咻蹦#1526     | [CodePen](https://codepen.io/emmasyu/pen/jOzEdrR?editors=1100)              |
|  christina#6185   | [CodePen](https://codepen.io/chrisc0210/pen/PoRwVza)                        |
|  Jamie Wu#9345   | [CodePen](https://codepen.io/Wu220103/pen/OJvPdBd)                          |
|  WEI_RIO#9342  | [CodePen](https://codepen.io/wei_wu/pen/PoRwVgL?editors=1100)                          |
|Grass立花#8094|[CodePen](https://codepen.io/kj25940858/pen/abYzMoL) |
|Henry#7386|[CodePen](https://codepen.io/h1nr9/pen/OJvPqLY) |
|Cliff#4606|[CodePen](https://codepen.io/Cliff_hex/pen/ExEaMVb) |
|小諾#1866|[CodePen](https://codepen.io/noichan/pen/poLvYyE) |
| Ron Liang #7277 |[CodePen](https://codepen.io/ron-go/pen/PoRwLov) |
| Clara Cai#7097 |[CodePen](https://codepen.io/Clara-Snowy/pen/WNzbmMG) |
| Jeff Lin #4717 |[CodePen](https://codepen.io/toqzvyeq-the-scripter/pen/bGvNZYE?editors=1100) |
| yen #5757 |[CodePen](https://codepen.io/TZU-HUANG-YEN/pen/NWYPJMR?editors=1100) |
| Yunei#6323 |[CodePen](https://codepen.io/Yunei/pen/ExEaMzd) |
| Fang #4680 |[CodePen](https://codepen.io/std95174/pen/vYREMNO?editors=1100) |
| LINK#1933 |[CodePen](https://codepen.io/miyayoe/pen/MWVYReB) |
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/poLvqqq) |
| Sin#0040 | [CodePen](https://codepen.io/sophmfyt-the-sasster/pen/YzaPbNr?editors=1100) |
| Van.CS #2067 | [CodePen](https://codepen.io/fbacojji-the-selector/pen/mdxygjW?editors=1100) |
| Fanglin#4054 | [Codepen](https://codepen.io/flynn841028/pen/wvmBbPR) |
|熊二#3824|[Codepen](https://codepen.io/BeckLai/pen/yLKyWQY)|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/QWmwXyj) |
| 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/RwMNzGd) |
| GL#2356 | [CodePen](https://codepen.io/4genie/pen/bGvNJZM) |
| Joyce#3790 | [CodePen](https://codepen.io/joycehuang/pen/qBoEzXM?editors=1100) |
| 浪裡小白龍#6860 | [CodePen](https://codepen.io/Emillo/pen/vYREqpw) |
| Susie(軒)#6181 | [CodePen](https://codepen.io/Codeleaf/pen/NWYPZeb) |
| yu魚#1330  | [CodePen](https://codepen.io/Yu_yu/pen/RwMNzOw)|
| 鉦勝#8333  | [CodePen](https://codepen.io/atckmax823/pen/oNqgrKr?editors=1100)|
| 狸貓#5863  | [CodePen](https://codepen.io/tanuki320/pen/zYWxgKe?editors=1100)
|鴨鴨#9822|[CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/gOebVmL?editors=1100)|
|siZunyo#3185|[CodePen](https://codepen.io/yi-lun-jhuang/pen/rNdaXjQ)|
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/ZExYgJm)|
|Melon#0380|[CodePen](https://codepen.io/BalaFang/pen/poLvMWZ)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/LYdEwGw?editors=1100)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/qBoEeJO?editors=1100)|
|Arista|[Codepen](https://codepen.io/arista-hsieh/pen/eYMNOYq)|
|CJ07 #0176|[CodePen](https://codepen.io/cjtseng07/pen/KKopPgY?editors=1100)|
|kai #1098|[CodePen](https://codepen.io/ahkai/pen/LYdVPzL)|
|bakiii #2652|[CodePen](https://codepen.io/aki168/pen/rNdVBYx)|
|LinaChen #1796|[CodePen](https://codepen.io/LinaChen/pen/OJvVLxB)|
|YunaHuang #2692|[CodePen](https://codepen.io/Yuna1002/pen/mdxJbZQ?editors=1100)|
|Sentiments#4883|[CodePen](https://codepen.io/Sentiments/pen/abYObdV?editors=1100)|
|艾芮絲#6060|[CodePen](https://codepen.io/wangyingju/pen/QWmbWaK)|
|ssozr#4680|[CodePen](https://codepen.io/ssozr/pen/WNzvNzG)|
|鑫鑫#4346|[Codepen](https://codepen.io/Neil1024/pen/rNdVaBr)|
|Halla#0431|[Codepen](https://codepen.io/wawykddh-the-typescripter/pen/vYROYQo)|
| Yuan962#5897 |[Codepen](https://codepen.io/Jasmine-Liao/pen/bGvdNEW)|
|    YU #0618   | [Codepen](https://codepen.io/yoken_/pen/MWVwWLO)             |
|    smallmi80#3735   | [Codepen](https://codepen.io/smallmimi80/pen/BarNaGK)|
| color #4378 |[Codepen](https://codepen.io/color0602/pen/oNqXgbK?editors=1100)|
|rueee#7997 |[Codepen](https://codepen.io/Jull-C/pen/rNdVapP)|
| Shuo#1596 | [CodePen](https://codepen.io/chiangchungshuo/pen/RwMPNOV) |
| Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/jOzPEqa)|
|Jason1#2538 |[Codepen](https://codepen.io/jotwxezb-the-encoder/pen/jOzPELz)|
|hunset35#3186|[Codepen](https://codepen.io/hunset35/pen/MWVwwQY)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/mdxJead)|
|     choubree#4350     | [Codepen](https://codepen.io/BreeChou/pen/ExEjgPG)             |
|     44#6963     | [Codepen](https://codepen.io/lin-b/pen/BarNLJZ?editors=1100)             |
| Ke#1391| [CodePen](https://codepen.io/federerke/pen/XWEbjEG) |
| 黃士桓#7654 | [codenPen](https://codepen.io/shr-huan-huang/pen/mdxJOPq?editors=1100) |
| GARBO#6659 | [codenPen](https://codepen.io/garbo8130/pen/ExEjNvK?editors=1100) |
| KJ T.#8381 | [CodenPen](https://codepen.io/leontsai218/pen/VwXLmxr) |
| mei #8421 | [CodenPen](https://codepen.io/Shila-Chen/pen/rNdVjaj?editors=1100) |
| Vera#5592 | [CodenPen](https://codepen.io/skvera/pen/JjLdbwJ) |
| QOO#8446 | [CodenPen](https://codepen.io/QOOQOOQ/pen/wvmagwL?editors=1100) |
| Tuhacrt#8446 | [CodenPen](https://codepen.io/Tuhacrt/pen/abYOWYB?editors=1100) |
| Vian #7338 | [CodenPen](https://codepen.io/vianwu31/pen/xxWGdJq?editors=1100) |
| Tokyoyo #9509 | [CodenPen](https://codepen.io/tokyoyo/pen/XWEJgYY) |
| Jie Du #4493 | [CodenPen](https://codepen.io/qgqonost-the-flexboxer/pen/eYMNMdg?editors=1100) |
| YI #0863 | [CodenPen](https://codepen.io/YI0305/pen/NWYqYmR?editors=1100) |
| 肉桂卷#0625 | [CodenPen](https://codepen.io/ginnlee/pen/MWVwGwr?editors=1100) |
| Cream#3449 | [CodenPen](https://codepen.io/frxdwbbi-the-sasster/pen/ZExGRbN?editors=1100) |
| 阿蘇#8531| [CodenPen](https://codepen.io/susu8327/pen/XWEbYRJ) |
|   Chi_Chen#3755   |         [CodePen](https://codepen.io/akichen27/pen/XWEboNP)         |     || 肯肯#1576| [CodenPen](https://codepen.io/kkwcan/pen/mdxyvbB?editors=1100) |
| 肉魚#2149 | [CodenPen](https://codepen.io/zoechen13/pen/zYWGMmR) |
| jason so#3921 | [CodenPen](https://codepen.io/jasonso/pen/abYOPVM) |
| Pony#6778 | [CodenPen](https://codepen.io/Pony0303/pen/abYOPwX) |
| bonnieli1414#4906 | [CodenPen](https://codepen.io/bonnieli1414/pen/oNqXraa?editors=1100) |
| skypassion5000#4151 | [CodenPen](https://codepen.io/skypassion5000/pen/mdxJNLE?editors=1100) |
| JackC#0411 | [CodenPen](https://codepen.io/key0329/pen/jOzbNRg) |
| Chun#7802 | [CodenPen](https://codepen.io/zpsamglw-the-bold/pen/dymYyyJ) |
| mickey#8745 | [CodenPen](https://codepen.io/weizhetseng/pen/rNdONNL?editors=1100) |
|曼曼#8356| [CodenPen](https://codepen.io/Vanyacheer/pen/PoRPZyW)|
| Barret#1119 | [CodenPen](https://codepen.io/barret0720/pen/bGvVEjr)|
|Manson許#2295|[CodePen](https://codepen.io/oupbzfxq-the-scripter/pen/abYvZdW)||
|MOMO#3370|[CodePen]((https://codepen.io/chiuyuchun/pen/yLKYgYN)||
|Leo Song #8278|[Codepen](https://codepen.io/sunnylaba/pen/vYRNWwP)||
|Emily Hsi #9066|[Codepen](https://codepen.io/EmilyHsi/pen/ExEVoNp)||
|Hsiu #8767|[Codepen](https://codepen.io/amy-hsiao-the-scripter/pen/eYMpKMq?editors=1100)||
|家洋#6999|[CodePen](https://codepen.io/yang940648/pen/poLjQvz)||
|Randy #0393|[CodePen](https://codepen.io/randy820113/pen/bGvVQYX?editors=1100)||
|pudding#2006|[CodePen](https://codepen.io/yushujhen/pen/dymYavX?editors=1100)||
|吉米阿民#8049|[CodePen](https://codepen.io/yinminlin/pen/mdxVyYP)||
|Han Lai|[CodePen](https://codepen.io/x94han/pen/XWEXbRw)||
|Jenny真#7532|[CodePen](https://codepen.io/wei-chen-wu/pen/jOzWPJd?editors=1100)||
|Daisy_Li#4231|[Codepen](https://codepen.io/lidairong-gmail-com/pen/rNdxOje) |
|Carrie#2750|[Codepen](https://codepen.io/carrie-wang/pen/vYRLmWy) |
|zaii#7472|[Codepen](https://codepen.io/ivy2846357/pen/rNdxrJL?editors=1100) |
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/rNdxZOw?editors=1100) |
|Kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/vYRLQEJ?editors=1100) |
|     Jo Yun #8899      | [Codepen](https://codepen.io/Jo_Yun/pen/VwXeVjz)             |
|     Scottie #3850      | [Codepen](https://codepen.io/wow767t/pen/dymGQRV?editors=1100)             |
|     RuoAn #7124      | [Codepen](https://codepen.io/LiauRuoAn/pen/LYdGMjg?editors=1100)             |
|      jeter #8014     | [Codepen](https://codepen.io/gi-tai-she/pen/BarKLMK?editors=1100)             |
| JarDar #6980 | [Codepen](https://codepen.io/jardarpen/pen/VwXaWOX) |
| wlc #4877 | [Codepen](https://codepen.io/arxmyifs/pen/RwMaYdX?editors=1100) |
| erwin阿瀚 #5422 | [Codepen](https://codepen.io/yohey03518/pen/WNzwYoa) |
| 薏慈#3795 | [Codepen](https://codepen.io/its_wang/pen/PoRNLZO) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/eYMzmwe)|
YaWen #2752|[CodePen](https://codepen.io/yuwendy/pen/rNdLGVJ)|
|     Kiwi#9804      | [Codepen](https://codepen.io/kiwi1113/pen/VwXjJmj)|
|     Nini Chen #5790      | [Codepen](https://codepen.io/ninistyle/pen/qBodzMy?editors=1100)|
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/RwMGQwv?editors=1100)
|yuchenye #6119|[CodePen](https://codepen.io/yuchen/pen/GRxjeEr)
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/ZExBEqP)
|Dingy#2931|[CodePen](https://codepen.io/dingy-xiao/pen/VwXmvoP?editors=1100)
|iamYanYan#9422|[CodePen](https://codepen.io/yayayanns/pen/qBoqZXy)
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/NWYbNYN)
|ROKA#4051|[CodePen](https://codepen.io/chengchiaoyi/pen/VwXmjEj?editors=1100)
|Nathan James#8120|[CodePen](https://codepen.io/ufo060204/pen/GRxNWQG)
|sophie sophiee#7015|[CodePen](https://codepen.io/sophiee2727/pen/yLKVPNp?editors=1100)
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/qBoRpmb)
|EmilyLin#0526|[CodePen](https://codepen.io/c199615/pen/wvmgZJy?editors=1100)
|WEI#0797|[CodePen](https://codepen.io/wei-z/pen/ZExKoZP)
|yuling#1634|[CodePen](https://codepen.io/igzdflpu/pen/VwXbRZX)
|KarenChan#4625|[CodePen](https://codepen.io/ruruchan7/pen/abYyVEW)
|鄭小蛙#3528|[CodePen](https://codepen.io/libclf/pen/dymZMME?editors=1100)
|Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/RwMxPoX)
|Jumpye#8601 | [Codepen](https://codepen.io/Jumpye/pen/JjLMZLe?editors=1100)
|KT Hsieh#2861|[Codepen](https://codepen.io/KTHsieh/pen/wvmmPyJ)
|DoraHunag#8223|[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/gOeqyNQ)
