# 🏅 Day 4 - 推擠方向

關於間距的推擠方向，我們通常會統一一個方向推擠，好處是能夠讓整體間距結構更明確易維護，假設同時推擠上下間距，就容易導致後續維護困難

題目中部分元素已經有 10px 的間距，但是同時使用了上下兩個方向來推擠
請練習將推擠方向修改為一致，但只能**修改 HTML 的 class 內容**，並且最後全部元素間距要跟一開始相同

<div class="wrap">
  <h1 class="title">標題</h1>
  <p class="text mb-1 mt-1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates ratione blanditiis modi!
  </p> 
  <img class="img mb-1" src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="ithome logo">
  <h2>副標題</h2>
  <ul class="list mt-1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

.mb-1{
  margin-bottom: 10px;
}
.mt-1{
  margin-top: 10px;
}

> 需加上 CSS Reset

### 題目
請參考上述說明，調整此 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/pvvBJqg?editors=1100)，並讓推擠方向一致。
示意圖：

## 回報流程

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


<!-- 解答：只需要看是否有統一推擠方向，所以全部改使用 mt-1 或是 mb-1 都是對的唷
mb -> https://codepen.io/jmimiding4104/pen/dyQPGKZ
mt -> https://codepen.io/jmimiding4104/pen/YzRPwve
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1 | Saika| [Codepen](https://codepen.io/saika4501/pen/NPqLeYy?editors=1100)|
| 2 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/dPoqwQX)|
| 3 | Esther | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/pvJOqBq?editors=1100)|
| 4 | Jenna | [Codepen](https://codepen.io/abiscc14/pen/ZYGMVZN)|
| 5 | jchunnn | [Codepen](https://codepen.io/jchunnn/pen/MYwqLKN)|
| 6 | Jerome | [Codepen](https://codepen.io/qsc002163/pen/ByNOMLP)|
| 7 | 那個貓貓 | [Codepen](https://codepen.io/zorakao/pen/pvJOGEm?editors=1100)|
| 8 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/LEVJqjy) |
| 9 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/KwpxJZO?editors=1100) |
| 10 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/NPqLoXJ?editors=1100) |
| 11 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/VYLGgJd?editors=1100) |
| 12 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/wBaENOb) |
| 13 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/pvJOYzg) |
| 14 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/ogXPVgd) |
| 15 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/GgJXeyV?editors=1100) |
| 16 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/NPqLJBR?editors=1100) |
| 17 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/ByNObgL?editors=1100) |
| 18 | suemma |[Codepen](https://codepen.io/suemma/pen/YPXObQE) |
| 19 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/MYwqdzK)|
| 20 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/gbpdJQQ?editors=1100) |
| 21 | Star |[Codepen](https://codepen.io/Hsin-Wu/pen/YPXObxE)|
| 22 | postar |[Codepen](https://codepen.io/peter_hung/pen/myJGYgz) |
| 23 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/raVZEem) |
| 24 | Evelyn |[Codepen](https://cdpn.io/pen/debug/XJbPLYZ?authentication_hash=gaMeYvLavzJM) |
| 25 | 社子畢卡索(Lu) |[Codepen](https://codepen.io/pen?template=GgJXVgo) |
| 26 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/dPoqxox?editors=1100) |
| 27 | 冠翔 |[Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/NPqOKdE?editors=1100) |
| 28 | hank |[Codepen](https://codepen.io/hankyang1213/pen/RNPebpx) |
| 29 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ogXaNby?editors=1100) |
| 30 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/RNPewZO?editors=1100) |
| 31 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/KwpGKPd) |
| 32 | Kiku |[Codepen](https://codepen.io/Li-Kusa/pen/raVqNpY?editors=1100) |
| 33 | Mumu |[Codepen](https://codepen.io/ztz_mu/pen/jEPvJMq) |
| 34 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/NPqOWeR) |
| 35 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/gbpBbYP) |
| 36 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/ByNqyNQ) |
| 37 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/azORzBM) |
| 38 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/xbGybPo) |
| 39 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/dPoqExe) |
| 40 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/ByNqyqm?editors=1100) |
| 41 | Ken |[Codepen](https://codepen.io/softpmdm-the-flexboxer/pen/MYwPwPw) |
| 41 | Zin |[Codepen](https://codepen.io/Zin-the-looper/pen/ogXaXde?editors=1100) |
| 42 | Hao |[Codepen](https://codepen.io/Howell/pen/MYwPwxK)|
| 43 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/dPogYMj)|
| 44 | kururu110 |[Codepen](https://codepen.io/ecqyjuck-the-decoder/pen/emNPpER)|
| 45 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/RNPeWBz)|
| 46 | LouisaFish |[Codepen](https://codepen.io/Louisa-Fish/pen/qEdJOYM?editors=1100)
| 47 | Yuuushan |[Codepen](https://codepen.io/ufdzimnk-the-sasster/pen/wBaYKNG)|
| 48 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/RNPeVmB)|
| 49 | Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/WbvaMNy?editors=1100)
| 50 | TY | [Codepen](https://codepen.io/Ted-Y/pen/QwbZQOY?editors=1100)
| 51 | Zhi |[Codepen](https://codepen.io/aneeiitk-the-typescripter/pen/OPVBvZL) |
| 52 | Yanchen16 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/emNPxpa) |
| 53 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/PwqxwjN) |
| 54 | Satar |[Codepen](https://codepen.io/SatarKuo/pen/ByNGNom?editors=1100) |
| 55 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/JodedNG) |
| 56 | cbs9007 |[CodePen](https://codepen.io/wasdjk/pen/LEVXVXW?editors=1100)|
| 57 | ahga |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/yyNQOWB) |
| 58 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/gbpQwGP?editors=1100) |
| 59 | Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/VYLVXWx) |
| 60 | Space key |[Codepen](https://codepen.io/uuajlwse-the-selector/pen/ZYGmxRB) |
| 61 | Pegggy |[Codepen](https://codepen.io/Peggy_C/pen/OPVaBmO) |
| 62 | NellyGuo |[Codepen](https://codepen.io/iizqdzgh-the-scripter/pen/yyNQwqO) |
| 63 | 立花 |[Codepen](https://codepen.io/kj25940858/pen/OPVrPaR?editors=1100) |
| 64 | zhe |[Codepen](https://codepen.io/dotheright/pen/VYLqaqp) |
| 65 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/raVoyBw?editors=1100) |
| 66 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/QwbzZmr?editors=1100) |
| 67 | 孟 |[Codepen](https://codepen.io/Mengru0503/pen/YPXdRZE) |
| 68 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/bNdOPmJ?editors=1100) |
| 69 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/azOPevV?editors=1100) |
| 70 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/NPqoMKZ) |
| 71 | Fang |[Codepen](https://codepen.io/Fang-the-encoder/pen/vEOPxMP) |
| 72 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/azOMWpR?editors=1100) |
| 73 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/ZYGPypP) |
| 74 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/azOMyoB) |
| 75 | 加菲 |[Codepen](https://codepen.io/DOU-CF/pen/xbGBPjZ) |
| 76 | Alyssa |[Codepen](https://codepen.io/AlyssaYen/pen/raVRJrZ?editors=1100) |
| 77 | teresa |[Codepen](https://codepen.io/teresa150029/pen/QwboJJz) |
| 78 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/YPXMP) |
| 79 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/QwbPpJw?editors=1100) |
| 80 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/xbGerwN) |
| 81 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/ZYGZMzg) |
| 82 | 李大維 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/LEVvKyP) |
| 83 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/VYLNoXy?editors=1100) |
| 84 | Stanley |[Codepen](https://codepen.io/Stanley-Chang-the-flexboxer/pen/GgJaKXR) |
| 85 | Zong |[Codepen](https://codepen.io/BAY71/pen/ZYGNxyj?editors=1100) |
| 86 | QoQ |[Codepen](https://codepen.io/fabusolq-the-styleful/pen/ogXRVGK) |
| 87 | PAgaNiNi |[Codepen](https://codepen.io/PA-OTTER/pen/NPqZYev) |
| 88 | World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/vEOqQxo) |
| 89 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/jEPgPpP) |
| 90 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/LEVwgBO) |
| 91 | Bee |[Codepen](https://codepen.io/Bee-Lu/pen/jEbNRxZ) |
| 92 | Ching | [Codepen](https://codepen.io/huangching/pen/yyYBdxg) |
| 93 | Mini | [Codepen](https://codepen.io/miiinii32-Cheng/pen/vENYxQL) |
| 94 | 伊迪 | [Codepen](https://codepen.io/eku10rei/pen/pvjoWGX?editors=1100) |
| 95 | B | [Codepen](https://codepen.io/Babel777/pen/wBKvZEg?editors=1100) |
| 96 | Fancy | [Codepen](https://codepen.io/Fancy-the-lessful/pen/empNmNg) |
| 97 | 雅潔 | [Codepen](https://codepen.io/MOMOYA/pen/qEOddvO) |
| 98 | Lika | [Codepen](https://codepen.io/wlyvctff-the-solid/pen/QwjbQzr) |
| 99 | water | [Codepen](https://codepen.io/wateruby/pen/MYaaWdY)|
| 100 | Lucy | [Codepen](https://codepen.io/Lucytrycode/pen/bNVVZEY)|
| 101 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/azvdJbN)|
| 102 | cheryl |[Codepen](https://codepen.io/katrina-the-decoder/pen/wBKMmRj?editors=1100)|
| 103 | cindy |[Codepen](https://codepen.io/a50134/pen/jEbWjgQ)
|104| 小趴|[Codepen](https://codepen.io/papa2415/pen/EaVKmjX)|
|105| 阿鍋 |[Codepen](https://codepen.io/YING-TING-KUO/pen/pvjbJXP)|
|106| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/myeEvLa?editors=1100)|
| 107 | Va |[Codepen](https://codepen.io/lichenValin/pen/OPyRQpB) |
| 108 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/GgpjxKe) |
| 109 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/WbQRpyZ) |
| 110 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/XJmpQpE?editors=1100)|
|111 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/PwPbRMP) |
|112 | Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/vENmGMx) |
|113 | Sam |[Codepen](https://codepen.io/lee-wei-hong/pen/PwPQYBx) |
| 114 | 4ping | [Codepen](https://codepen.io/928Libra/pen/QwjrQpm)|
| 115 | 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/VYvqxwY)|
<!-- 快速複製 -->
<!-- | 排序 | 姓名 |[Codepen](連結) | -->