---
# System prepended metadata

title: "\U0001F3C5 Day 4 - 推擠方向"
tags: [網頁切版直播班 - 2024 夏季班]

---

# 🏅 Day 4 - 推擠方向

題目中部分元素已經有 10px 的間距，但是同時使用了兩種不同的推擠方向
請練習將推擠方向修改為一致，但只能**修改 HTML 的 class 內容**，並且最後畫面要跟原本的一樣

```htmlembedded=
<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>

```

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

```

> 需加上 CSS Reset

## 回報流程

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

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

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


回報區
---

|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1   |Jainee   | [Codepen](https://codepen.io/Jainee0110/pen/YzbJaEe)|
|  2  |   han   | [Codepen](https://codepen.io/iamHanCheng/pen/BaexMYE)|
|  3  |   毛巾   | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RwmOxXQ)|
|  4  | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/KKLGvZm)| 
|  5  | erichsu0406 | [Codepen](https://codepen.io/esxwvufg-the-flexboxer/pen/BaeEYjv)| 
|  6  | Mike | [Codepen](https://codepen.io/mike2049/pen/Povajgz?editors=1100)| 
| 7 | fan_fan |[Codepen](https://codepen.io/fan1102/pen/ExzJQdb?editors=1010)|
| 8 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/RwmOQBE)| 
| 9 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/yLWrvGV?editors=1100)| 
| 10 | Kim |[Codepen](https://codepen.io/kim0101__/pen/ExzJQqQ)| 
| 11 | Yolanda |[Codepen](https://codepen.io/vcscqrtz-the-animator/pen/jOoRzOV)| 
| 12 | kawa |[Codepen](https://codepen.io/z83xji6/pen/LYovdWq)| 
| 13| Theodore |[Codepen](https://codepen.io/GustavoFringgg/pen/OJYGvmM?editors=1100)| 
| 14| lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/ExzJEve)| 
| 15| jasonlin |[Codepen](https://codepen.io/gfswkraq-the-reactor/pen/zYQXWLM)| 
| 16 | GAVI |[Codepen](https://codepen.io/qbafldcv-the-scripter/pen/qBGwoge)|
| 17   |OSN|[Codepen](https://codepen.io/osncodepen/pen/gOJyeWp)|
| 18 | wind |[Codepen](https://codepen.io/wind7y/pen/bGyJvyr)|
| 19 | n913239 |[Codepen](https://codepen.io/n913239/pen/zYQXWQb)|
| 20 | david1819 |[Codepen](https://codepen.io/David-Lin-the-vuer/pen/BaeErrQ)|
| 21 | Chloe_墨 |[Codepen](https://codepen.io/ChloeTseng1026/pen/JjqVLMx)|
| 22 | wan_ju |[Codepen](https://codepen.io/Laura21/pen/jOoRxpd)|
| 23 | wei |[Codepen](https://codepen.io/Wei-the-sasster/pen/MWdRGLN?editors=1100)|
| 24 | 爆漿 |[Codepen](https://codepen.io/dhpsxzwh-the-decoder/pen/QWRPxKe)|
| 25 | macihuang |[Codepen](https://codepen.io/macy1215/pen/LYXmBmY)|
| 26 | 皮皮 |[Codepen](https://codepen.io/rainbow-the-reactor/pen/OJYGEQG?editors=1100)|
| 27 | jimmy.0706 |[Codepen](https://codepen.io/JimmyMao/pen/gOJyjpY)|
| 28 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/JjqVBjB)|
| 29 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/VwONBvR)|
| 30 | N7 |[Codepen](https://codepen.io/neohyntw/pen/abrxjJa)|
| 31 | Jim |[Codepen](https://codepen.io/JimChou/pen/ZENZjJr)|
| 32 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/gOJyjEw?editors=1100)|
| 33 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/qBGwyve)|
| 34 | 兔子 |[Codepen](https://codepen.io/ttppoo12144/pen/RwmOBXR)|
| 35 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/LYovJZV)|
| 36 | KUN. |[Codepen](https://codepen.io/barry91205/pen/wvbZYGN)|
| 37 | OZ |[Codepen](https://codepen.io/OZ_design/pen/yLWrRoY?editors=1100)|
| 38 | Ivy |[Codepen](https://codepen.io/Irene-Ke/pen/wvbZYpL?editors=1100)|
| 39 | ArvinYang1925 |[Codepen](https://codepen.io/arvinyang1925/pen/vYwMQXq?editors=1100)|
| 40 | tung |[Codepen](https://codepen.io/ru-ching/pen/JjqVeEm)|
| 41 | icesea25 |[Codepen](https://codepen.io/icesea25/pen/VwONVzJ)|
| 42 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/OJYGaQX?editors=1100)|
| 43 | hao jing |[Codepen](https://codepen.io/hjxu/pen/QWRPorg?editors=1100)|
| 44 | MYP |[Codepen](https://codepen.io/pmyfr/pen/ExzJzay)|
| 45 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/oNRORep)|
| 46 | Noelle |[Codepen](https://codepen.io/NoelleKH/pen/PovgvEV)|
| 47 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/jOoRogr?editors=1100)|
| 48 | lianne._. |[Codepen](https://codepen.io/Elaina-L/pen/RwmOzOr)|
| 49 | Angela_la |[Codepen](https://codepen.io/Angela-the-builder/pen/zYQXVJm?editors=1100)|
| 50 | brucelee0629 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/YzbbKzr)|
| 51 | CrystalLala |[Codepen](https://codepen.io/crystallala/pen/zYQavXM)|
| 52 | 嚼勁 |[Codepen](https://codepen.io/James520284/pen/ExzzYpX)|
| 53 | gracechiang225 |[Codepen](https://codepen.io/gracechiang225/pen/qBGGWQx)|
| 54 | 蘑菇星星 |[Codepen](https://codepen.io/brrrieon-the-vuer/pen/Rwmmbqq)|
| 55 | ray |[Codepen](https://codepen.io/rayychenn/pen/GRaaRKa)
| 56 | chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/vYwwEWg)|
| 57 |Darius_TszYing |[Codepen](https://codepen.io/bekgnohe-the-selector/pen/MWddYwq)|
| 58 | zaoannihao |[Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/pommbzE?editors=1100)|
| 59 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/BaeejrY)|
| 60 | MY |[Codepen](https://codepen.io/ahmomoz/pen/ZENNeWq?editors=1010)|
| 61| zxlee |[Codepen](https://codepen.io/zxlee/pen/xxNNqzG?editors=1100)|
| 61| emmayo |[Codepen](https://codepen.io/emmayo/pen/mdYYWaM)|
| 62 | neoyo |[Codepen](https://codepen.io/Neo-oo/pen/wvbbJZX)|
| 63 | VVN |[Codepen](https://codepen.io/fbnpemqq-the-vuer/pen/ExzzWBV)|
| 64 | 咖 |[Codepen](https://codepen.io/daru-Ga/pen/gOJJXRY)|
| 65 | xcx100 |[Codepen](https://codepen.io/c13026/pen/NWVVwLd?editors=1100)|
| 66 | Annis |[Codepen](https://codepen.io/Annis-shen/pen/eYaaVVZ?editors=1100)|
| 67| Lobinda |[Codepen](https://codepen.io/Lobinda/pen/WNBBzEx)|
| 68 | jeffjoe486 |[Codepen](https://codepen.io/Jeff-K-the-selector/pen/yLWWKjo)|
| 69 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/ZENNqzg)|
| 70 | hi264277 |[Codepen](https://codepen.io/ygfaoycv-the-solid/pen/rNgoEWR)|
| 71 | KevinHuang |[Codepen](https://codepen.io/qw-huang/pen/zYQQQgw?editors=1100)|
| 72 | anson-tsai |[Codepen](https://codepen.io/vuogajlx-the-vuer/pen/pomXPRB?editors=1100)|
|73|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/zYQVzMW?editors=1100)|
| 74 | jamesct34 |[Codepen](https://codepen.io/JCT34/pen/qBGzVQJ)|
| 75 | Minnie |[Codepen](https://codepen.io/ShengXin-Lin/pen/RwmmJPj)|
| 76 | 黑嚕嚕 |[Codepen](https://codepen.io/wzokvjha-the-vuer/pen/RwmzJBQ)|
| 77 | 小咪 |[Codepen](https://codepen.io/iloveu3000x/pen/dyEBjMe)|
| 78 | 地瓜 |[Codepen](https://codepen.io/huangtzuchin/pen/JjqQBGO)|
|79|Glen_69515| [Codepen](https://codepen.io/glenyaochih/pen/xxNoJNa)|
|80|俊| [Codepen](https://codepen.io/jun12079/pen/RwmzEVP)|
| 81 | 深海 |[Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/ZENdVrM)|
| 82 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/vYwqvwX)|
| 83 | BonBonC |[Codepen](https://codepen.io/abon-chen/pen/BaegvEw)|
| 84 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/PovrVbE)|
| 85 | Tippy |[Codepen](https://codepen.io/Ektodor-Wang/pen/ZENdPzQ)|
| 86 | ninii傳教士 |[Codepen](https://codepen.io/niiniiii/pen/JjqQqYd?editors=1100)|
| 87 | Enn |[Codepen](https://codepen.io/enntang/pen/eYaqOBw)|
| 88 | yoishere |[Codepen](https://codepen.io/zrdiegwx-the-selector/pen/dyExbOO)|
| 89 | 秀 |[Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/LYowPgy)|
| 90 | EdHuang |[Codepen](https://codepen.io/yide1986/pen/GRaVKeG)|
| 91 | jerry_66893 |[Codepen](https://codepen.io/Barry-C/pen/KKLOKPP)|
| 92 | skyderry |[Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/PovMoMw)|
| 93 | iamcan |[Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/pomMNvO?editors=1100)|
| 94 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/VwOoPbd)|
| 95 | Kerwin |[Codepen](https://codepen.io/kerwin/pen/NWVQdeG)|
| 96 | 柯柯 |[Codepen](https://codepen.io/ko13/pen/eYaqvzV)|
| 97 | EmmaMa |[Codepen](https://codepen.io/Emma0919/pen/RwmXgLe)|
| 98 | fendy1223 |[Codepen](https://codepen.io/fendy1223/pen/YzbmvYZ)|
| 99 | hoyiiiii |[Codepen](https://codepen.io/hoyii/pen/eYaqKbY)|
| 100 | Chewsday |[Codepen](https://codepen.io/Chewsday/pen/XWwvOyJ?editors=1100)|
| 101 | Joannehu |[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/mdYNgVZ)|
| 102 | 安安兒 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RwmOxXQ)|
| 103 | ray |[Codepen](https://codepen.io/rayychenn/pen/KKjPpeb)|
| 104 | Tony名彤 |[Codepen](https://codepen.io/Ming-Tung-Chien/full/dyBbogN)|
| 105 | Enzo |[Codepen](https://codepen.io/JasonHo_HYC/pen/XWLrmNK)|
| 106 | smallr1229 |[Codepen](https://codepen.io/Smallr/pen/ZENgQmq)|
| 107 | 星雨 |[Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/YzoKpww)|
| 108 | ㄚ華 |[Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/qBzWVmm?editors=1100)|
| 109 | Ollie |[Codepen](https://codepen.io/daiyy97/pen/ZEdzrQM)|
| 110 | Steven1220 |[Codepen](https://codepen.io/Steven1220/pen/abrejyw)|
| 111 | Show21 |[Codepen](https://codepen.io/t10026706/pen/ZEdzwrV)|
| 112 | shine_lalala |[Codepen](https://codepen.io/cdjpjets-the-solid/pen/xxoKBpq)|
| 113 | 雪粒 |[Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/bGPGGLz)|
| 114 | .sytiny |[Codepen](https://codepen.io/emma6542/pen/ZEdEEwW)|
| 115 |喵喵|[Codepen](https://codepen.io/snow1224/pen/MWMWyOq)
| 116 |eddiesun0526|[Codepen](https://codepen.io/Eddie0526/pen/dyByqOK?editors=1100)
| 117 | JIAWUN |[Codepen](https://codepen.io/wkasixgv-the-sasster/pen/XWLWLVb)|
| 118 | Matt BB |[Codepen](https://codepen.io/mm3248965/pen/MWMYjZp?editors=1100)
| 119 | Yunya |[Codepen](https://codepen.io/cookie1515/pen/WNqeJow)|
| 120 | 610 |[Codepen](https://codepen.io/YI-LING-LIU/pen/XWLJRqx)|
| 121 | Ana |[Codepen](https://codepen.io/Ana-Wu/pen/PorwBGK)|
| 122 | DoryH |[Codepen](https://codepen.io/dorihung/pen/QWXwJJz)|
| 123 | xiang5141 |[Codepen](https://codepen.io/XIANG-XIANG/pen/PorqqeZ)|
| 124 | qet1717 |[Codepen](https://codepen.io/gwteqexi-the-bold/pen/YzoXaPX?editors=1100)|
| 125 | 黛西 |[Codepen](https://codepen.io/ChiashengLin/pen/NWZqzzb)|
| 126 | zen |[Codepen](https://codepen.io/zen742937/pen/bGPdjrY)|
| 127 | chris |[Codepen](https://codepen.io/chrischen666/pen/dyBoQJG?editors=1100)|
| 128 | atien0816 |[Codepen](https://codepen.io/Ben-Atien/pen/WNqvBxQ)|
| 129 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/poXJXxQ?editors=1100)|
| 130 | Judy |[Codepen](https://codepen.io/yangchi/pen/poXjWQP)|
| 131 | 白夜 |[Codepen](https://codepen.io/Wei903/pen/vYqNjdW)|
| 132 | zobody |[Codepen](https://codepen.io/Zoe-Shih/pen/qBzOype)|
| 133 | davidchi |[Codepen](https://codepen.io/DAVID-CHI/pen/MWMazYO)|
| 134 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/eYwpbYo)|
| 135 | 馬克斯 |[Codepen](https://codepen.io/twnmax/pen/RwzaVwj)|
| 136 | LKP |[Codepen](https://codepen.io/qtghjujs-the-sasster/pen/KKjzGwE?editors=1100)|
| 137 | Shou lun_守倫|[Codepen](https://codepen.io/SHIHSHOULUN/pen/JjQRywQ)|
 | 138 |rita |[Codepen](https://codepen.io/k99364/pen/eYwBEZE?editors=1100)|
  | 139 |Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/JjQEJYX)|
  | 140 |Mandy syu |[Codepen](https://codepen.io/Mandy-Syu/pen/jOjyLom?editors=1100)|
  | 141 |野鴿 |[Codepen](https://codepen.io/HoshinoSyouta/pen/ExBWmbO)|
| 142 |ㄑㄧㄢ|[Codepen](https://codepen.io/CHIEN-YU-Lin/pen/eYwWOJG)|
| 143 |小光|[Codepen](https://codepen.io/nwqetvuj/pen/oNrWYYJ)|
| 144 | Toung |[Codepen](https://codepen.io/Toung/pen/OJemmGb)|
| 145 | Lynee |[Codepen](https://codepen.io/ntibaiss-the-solid/pen/JjQymEy?editors=1100)|
| 146 | Charlotte Wong|[Codepen](https://codepen.io/Charlotte-Wang/pen/yLdvrWp)|
| 147 | Haru |[Codepen](https://codepen.io/yology/pen/PorRYGW)|
| 148 | ji3di |[Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/NWZYEzo)|
| 149 | Lotte |[Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/zYVbdvz?editors=1100)|
| 150 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/JjQzOZN)|
| 151 | Oria |[Codepen](https://codepen.io/kajing/full/raxOMpq)|
<!--快速複製
|  | Discord名稱 |[Codepen]()|
-->


