# 🏅 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 | 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](作業網址放這邊)| -->