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

### margin
調整元素外邊距，向外推出元素與元素之間的間距、留白。
示意圖：

### padding
調整元素內邊距，向內推出外層與內層元素之間的間距、留白，或是 border 與元素內容之間的留白。
示意圖：

### 題目
請運用上方規則，調整此 [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）

示意圖：

## 回報流程

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


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

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1 | Jainee |[Codepen](https://codepen.io/Jainee0110/pen/xxNyYYx)|
| 2 | hao jing |[Codepen](https://codepen.io/hjxu/pen/xxNeBoN?editors=1100)|
| 3 | han |[Codepen](https://codepen.io/iamHanCheng/pen/XWwqOwa)|
| 4 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/RwmOmvE?editors=1100)|
| 5 | DoryH |[Codepen](https://codepen.io/dorihung/pen/mdYgYYo)|
| 6 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/ZENZNdK?editors=1100)|
| 6 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ZENZdYy)|
| 8 | Mike |[Codepen](https://codepen.io/mike2049/pen/VwONJag?editors=1100)|
| 9 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/NWVmZpR?editors=1100) |
| 10 |Chloe_墨|[Codepen](https://codepen.io/ChloeTseng1026/pen/KKLYjeX)|
| 11 | lianne._. |[Codepen](https://codepen.io/Elaina-L/pen/BaeEggW)|
| 12 |Yolanda|[Codepen](https://codepen.io/vcscqrtz-the-animator/pen/ZENZgzM)|
| 13 |Angela_la|[Codepen](https://codepen.io/Angela-the-builder/pen/RwmOXPR?editors=1100)|
| 14 | CrystalLala |[Codepen](https://codepen.io/crystallala/pen/BaeVoep)|
| 15 | brucelee0629 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/qBGGWOr?editors=1100)|
| 16 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/WNBBeOq)|
| 17 | 兔子 |[Codepen](https://codepen.io/ttppoo12144/pen/VwOOZgG?editors=1100)|
| 18 | 蘑菇星星 |[Codepen](https://codepen.io/brrrieon-the-vuer/pen/vYwwBbQ)|
| 19 | gracechiang225 |[Codepen](https://codepen.io/gracechiang225/pen/gOJJYVN)|
| 20 | Kim |[Codepen](https://codepen.io/kim0101__/pen/LYovKxM?editors=1100)|
| 21 | GAVI |[Codepen](https://codepen.io/qbafldcv-the-scripter/pen/dyEEyyg?editors=1100)|
| 22 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/KKLLKPg?editors=1100)|
| 23 | david1819 |[Codepen](https://codepen.io/David-Lin-the-vuer/pen/LYooPor)|
| 24 | n913239 |[Codepen](https://codepen.io/n913239/pen/oNRRNNP)|
| 25 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/YzbbzGM)|
| 26 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/QWRRWvd?editors=1100)|
| 27 | Theodore |[Codepen](https://codepen.io/GustavoFringgg/pen/wvbbvjz)|
| 28 | wei |[Codepen](https://codepen.io/Wei-the-sasster/pen/rNggNgq?editors=1100)|
| 29 | kawa |[Codepen](https://codepen.io/z83xji6/pen/xxNNxNe?editors=1100)|
| 30 | 皮皮 |[Codepen](https://codepen.io/rainbow-the-reactor/pen/BaeeoWo)|
| 31 | chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/abrrvvY?editors=1100)|
| 32 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/GRaaZYP?editors=1100)|
| 33 | KUN. |[Codepen](https://codepen.io/barry91205/pen/JjqqRoQ?editors=1100)|
| 34 | Jim |[Codepen](https://codepen.io/JimChou/pen/wvbbzMq)|
| 35 | Jack |[Codepen](https://codepen.io/kxbhixte-the-sasster/pen/jOooMWz?editors=1100)|
| 36 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/KKLLMLZ)|
| 37 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/pommEGY)|
| 38 | 嚼勁 |[Codepen](https://codepen.io/James520284/pen/WNBBoRW)|
| 39 | fan_fan |[Codepen](https://codepen.io/fan1102/pen/LYoobbL?editors=1100)|
| 40 | N7 |[Codepen](https://codepen.io/neohyntw/pen/yLWWVoy)|
| 41 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/mdYYOOL?editors=1100)|
| 42 | tung |[Codepen](https://codepen.io/ru-ching/pen/ExzzZgE)|
| 43|Darius_TszYing |[Codepen](https://codepen.io/bekgnohe-the-selector/pen/pommRLr?editors=1100)|
| 44 | Ivy |[Codepen](https://codepen.io/Irene-Ke/pen/JjqqWXg?editors=1100)|
| 45 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/OJYGebV) |
| 46 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/gOJJmWW?editors=1100) |
| 47 | icesea25 |[Codepen](https://codepen.io/icesea25/pen/VwOOpWa)|
| 48 | zxlee |[Codepen](https://codepen.io/zxlee/pen/mdYYWmR?editors=1100)|
| 49 | MY |[Codepen](https://codepen.io/ahmomoz/pen/ExzzWgz)|
| 50 |OSN|[Codepen](https://codepen.io/osncodepen/pen/mdYYWEr)|
| 51 |Sonia|[Codepen](https://codepen.io/YUJOU/pen/JjqqWzX?editors=1100)|
| 52 |emmayo|[Codepen](https://codepen.io/emmayo/pen/GRaaWeO)|
| 53 |VVN|[Codepen](https://codepen.io/fbnpemqq-the-vuer/pen/MWddmwg)|
| 54 |neoyo|[Codepen](https://codepen.io/Neo-oo/pen/ZENNKQE?editors=1100)|
| 55 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/abrryaz)|
|56|Lobinda|[Codepen](https://codepen.io/Lobinda/pen/XWwwMjG)
| 57 | 咖 |[Codepen](https://codepen.io/daru-Ga/pen/pommdwe)|
| 58 | MYP |[Codepen](https://codepen.io/pmyfr/pen/vYwwWbY)|
| 59 | xcx100 |[Codepen](https://codepen.io/c13026/pen/bGyyYQB?editors=1100)|
| 60 | wind |[Codepen](https://codepen.io/wind7y/pen/GRaayxm)|
| 61 | Annis |[Codepen](https://codepen.io/Annis-shen/pen/oNRREqo?editors=1100)|
| 62 | jeffjoe486 |[Codepen](https://codepen.io/Jeff-K-the-selector/pen/eYaaMjV)|
| 63 | OZ |[Codepen](https://codepen.io/OZ_design/pen/VwOOdxQ?editors=1100)|
| 64 | arvin |[Codepen](https://codepen.io/arvinyang1925/pen/mdYYKzz?editors=1100)|
| 65 | hi264277 |[Codepen](https://codepen.io/ygfaoycv-the-solid/pen/rNgoEWR)|
| 66 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/QWRRYdo?editors=1100)|
| 67 | KevinHuang |[Codepen](https://codepen.io/qw-huang/pen/KKLLjag?editors=1100)|
|68|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/zYQVdYL)|
| 69 | anson-tsai |[Codepen](https://codepen.io/vuogajlx-the-vuer/pen/XWwLzdR?editors=1100)|
| 70 | 爆漿 |[Codepen](https://codepen.io/dhpsxzwh-the-decoder/pen/qBGzVNx)|
| 71 | jamesct34 |[Codepen](https://codepen.io/JCT34/pen/JjqQOge)|
| 72 | 地瓜 |[Codepen](https://codepen.io/huangtzuchin/pen/zYQVLKz)|
| 73 | 小咪 |[Codepen](https://codepen.io/iloveu3000x/pen/WNBqKEv)|
|74|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/vYwqzYo)|
|75|黑嚕嚕|[Codepen](https://codepen.io/wzokvjha-the-vuer/pen/WNBqgxj)|
| 76 | Noelle |[Codepen](https://codepen.io/NoelleKH/pen/OJYeaOK?editors=1100)|
| 77 | 俊 |[Codepen](https://codepen.io/jun12079/pen/WNBqLXZ)|
| 78 | 深海 |[Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/jOojXez)|
| 79 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/oNRrmgx)|
| 80 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/NWVZogO)|
| 81 | BonBonC |[Codepen](https://codepen.io/abon-chen/pen/xxNoMVG)|
| 82 | Eason |[Codepen](https://codepen.io/eulvmmbq-the-typescripter/pen/gOJNEaZ)|
| 83 | Tippy |[Codepen](https://codepen.io/Ektodor-Wang/pen/JjqQzPJ)|
| 84 | kaka_945 |[Codepen](https://codepen.io/kay945/pen/NWVZJaP)|
| 85 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/LYoKojb?editors=1100)|
| 86 | Enn |[Codepen](https://codepen.io/enntang/pen/jOogNmX)|
| 87 | 秀 |[Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/MWdNgRY)|
| 88 | jerry_66983 |[Codepen](https://codepen.io/Barry-C/pen/JjqgjoJ?editors=1100)|
| 89 | EdHuang |[Codepen](https://codepen.io/yide1986/pen/ExzqxaZ)|
| 90 | yoishere|[Codepen](https://codepen.io/zrdiegwx-the-selector/pen/yLWmLbO)|
| 91 | skyderry |[Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/KKLOwVq)|
| 92 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/qBGeRXp)|
| 93 | Kerwin |[Codepen](https://codepen.io/kerwin/pen/ExzqZJQ)|
| 94 | 柯柯 |[Codepen](https://codepen.io/ko13/pen/LYowWxa)|
| 95 | EmmaMa |[Codepen](https://codepen.io/Emma0919/pen/wvbVqvK)|
| 96 | fendy1223 |[Codepen](https://codepen.io/fendy1223/pen/eYaqKVq?editors=1100)|
| 97 | hoyiiiii |[Codepen](https://codepen.io/hoyii/pen/pomMZVy?editors=1100)|
| 98 | 安安兒 |[Codepen](https://codepen.io/joanne-wei/pen/gOJVNqy?editors=1100)|
| 99 | Ollie |[Codepen](https://codepen.io/daiyy97/pen/eYwONrw?editors=1100)|
| 100 | ray |[Codepen](https://codepen.io/rayychenn/pen/MWMgwBR)|
| 101 | TONY名彤 |[Codepen](https://codepen.io/Ming-Tung-Chien/pen/KKjPpOY)|
| 102 | Enzo |[Codepen](https://codepen.io/JasonHo_HYC/pen/WNqeQqQ)|
| 103 | smallr1229|[Codepen](https://codepen.io/Smallr/pen/GRbKqvX)|
| 104 | Chewsday|[Codepen](https://codepen.io/Chewsday/pen/xxoKOep?editors=1100)|
| 105 | 星雨 |[Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/dyBbNOV)|
| 106 | ㄚ華 |[Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/LYKPezX?editors=1100)|
| 107 | Steven1220 |[Codepen](https://codepen.io/Steven1220/pen/eYaqjKg)|
| 108 | Show21 |[Codepen](https://codepen.io/t10026706/pen/XWLrOYw)|
| 109 | shine_lalala |[Codepen](https://codepen.io/cdjpjets-the-solid/pen/GRbKVqL)|
| 110 | 雪粒 |[Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/bGPGGvZ)|
| 111 | Joannehu |[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/RwzwaQG)|
| 112 | 喵喵 |[Codepen](https://codepen.io/snow1224/pen/mdZdRXx)|
| 113 | .sytiny |[Codepen](https://codepen.io/emma6542/pen/poXowQo?editors=1100)|
| 114 | eddiesun0526|[Codepen](https://codepen.io/Eddie0526/pen/mdZdGmv?editors=1100)
| 115 | JIAWUN |[Codepen](https://codepen.io/wkasixgv-the-sasster/pen/dyByBwV)|
| 116 | Matt BB |[Codepen](https://codepen.io/mm3248965/pen/qBzEqRg?editors=1100)|
| 117 | Yunya |[Codepen](https://codepen.io/cookie1515/pen/BagypeG)|
| 118 | 610 |[Codepen](https://codepen.io/YI-LING-LIU/pen/poXvwvO)|
| 110 | Ana |[Codepen](https://codepen.io/Ana-Wu/pen/BagyPpJ?editors=1100)|
| 111 | Macihuang |[Codepen](https://codepen.io/macy1215/pen/rNEaZNx?editors=1100)|
| 121 | xiang5141 |[Codepen](https://codepen.io/XIANG-XIANG/pen/oNrXXar)|
| 122 | qet1717 |[Codepen](https://codepen.io/gwteqexi-the-bold/pen/poXJLMB)|
| 123 | 黛西 |[Codepen](https://codepen.io/ChiashengLin/pen/ZEdGRMr)|
| 124 | zen |[Codepen](https://codepen.io/zen742937/pen/GRbJBMW)|
| 125 | chris |[Codepen](https://codepen.io/chrischen666/pen/qBzdQod?editors=1100)|
| 126 | atien0816 |[Codepen](https://codepen.io/Ben-Atien/pen/RwzPmVO)|
| 127 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/OJeVedz?editors=1100)|
| 128 | Judy |[Codepen](https://codepen.io/yangchi/pen/jOjbGdB?editors=1100)|
| 129 | 白夜 |[Codepen](https://codepen.io/Wei903/pen/wvLKjZO)|
| 130 | davidchi |[Codepen](https://codepen.io/DAVID-CHI/pen/yLdYQOp)|
| 131 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/xxowmVw?editors=1100)|
| 132 | 馬克斯 |[Codepen](https://codepen.io/twnmax/pen/abgNWOZ)|
| 133 | LKP |[Codepen](https://codepen.io/qtghjujs-the-sasster/pen/ExBKdgK?editors=1100)|
| 134 | Chieh |[Codepen](https://codepen.io/Chieh_/pen/mdZrwYZ)|
| 135 | Shou lun_守倫 |[Codepen](https://codepen.io/SHIHSHOULUN/pen/jOjMLjx)|
| 136 | rita |[Codepen](https://codepen.io/k99364/pen/dyBOVPy?editors=1100)|
| 137 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/full/yLdgXOr)|
| 138 | tung |[Codepen](https://codepen.io/ru-ching/pen/qBzRyOZ)|
| 139 | 野鴿 |[Codepen](https://codepen.io/HoshinoSyouta/pen/zYVZwme?editors=1100)|
| 140 | 小光 |[Codepen](https://codepen.io/nwqetvuj/pen/XWLRNzq)|
| 141 | Toung |[Codepen](https://codepen.io/Toung/pen/YzoVQKX)|
| 142 | Lynee |[Codepen](https://codepen.io/ntibaiss-the-solid/pen/poXrxPJ?editors=1100)|
| 143 | Haru |[Codepen](https://codepen.io/yology/pen/PorXVNK?editors=1100)|
| 144 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/abgMEBE?editors=1100)|
| 145 | Lotte |[Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/zYVbmoM)|
| 146 | Oria |[Codepen](https://codepen.io/kajing/full/YPwyGaX)|

<!--
| No | Discord |[Codepen]()|
-->