---
# System prepended metadata

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

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 4

## 推擠方向

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

```htmlembedded=
<div class="wrap">
  <h1 class="title mt-1">標題</h1>
  <p class="text mb-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="">
  <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 都是對的唷 -->


回報區
---


|       Discord       |                                CodePen / 答案                                |     |
|:-------------------:|:----------------------------------------------------------------------------:| --- |
|     小鐵#2814     |              [CodePen](https://codepen.io/xiron/pen/RwMRJob)              |     |
|     布魯諾#7239     |              [CodePen](https://codepen.io/bruno-yu/pen/dymPGrv)              |     |
|    choubree#4350    |              [CodePen](https://codepen.io/BreeChou/pen/vYRELbJ)              |     |
|   StellaHsu#2687    |     [CodePen](https://codepen.io/stella950114/pen/RwMNrvL?editors=1100)      |     |
|     Clara#1275      |              [CodePen](https://codepen.io/bsupixqu/pen/JjLoGqR)              |     |
|      洋蔥#5295      |         [CodePen](https://codepen.io/HSUNA/pen/OJvPMqZ?editors=1100)         |     |
|      大衛#4869      |              [CodePen](https://codepen.io/exnsrpjc/pen/poLvgGB)              |     |
|     Chaoci#2460     |             [CodePen](https://codepen.io/gmailchao/pen/yLKyeWd)              |     |
|    Tuhacrt#0008     |              [CodePen](https://codepen.io/Tuhacrt/pen/RwMNabx)               |     |
|     mickey#8745     |            [CodePen](https://codepen.io/weizhetseng/pen/XWEJdrm)             |     |
|      Kiwi#9804      |              [CodePen](https://codepen.io/kiwi1113/pen/OJvPNJw)              |     |
|      zera#6060      |             [CodePen](https://codepen.io/zera-tseng/pen/NWYPNWe)             |     |
|    Amberhh#2465     |        [CodePen](https://codepen.io/Amberhh/pen/XWEJdbX?editors=1010)        |     |
|     Steve#9699      |              [CodePen](https://codepen.io/ycsteve/pen/JjLoXob)               |     |
|   Ron Liang#7277    |               [CodePen](https://codepen.io/ron-go/pen/BaryKoq)               |     |
|     心幻羽#0056     |            [CodePen](https://codepen.io/linglingsyu/pen/JjLoXKW)             |     |
|     Benson#6763     |              [CodePen](https://codepen.io/kumashow/pen/yLKyOMy)              |     |
|      yuyu#6310      |              [CodePen](https://codepen.io/yuyu0905/pen/QWmwNve)              |     |
|     楓之聲#6945     |             [CodePen](https://codepen.io/sshane258/pen/MWVYyXy)              |     |
|      鎔瑄#8578      |             [CodePen](https://codepen.io/barbarayou/pen/YzaPqev)             |     |
|   PeggyLiao#1552    |      [CodePen](https://codepen.io/PeiJu-Liao/pen/JjLoXmM?editors=1000)       |     |
|    peter.chen #     |       [CodePen](https://codepen.io/JIAN-RONG/pen/yLKyORO?editors=1100)       |     |
|   LHchien33#6232    |             [CodePen](https://codepen.io/lin_chien/pen/PoRwNXg)              |     |
|    JarDar #6980     |             [CodePen](https://codepen.io/jardarpen/pen/dymPMrj)              |     |
|      威0#6919       |            [CodePen](https://codepen.io/n0918679182/pen/gOebrEy)             |     |
|      int#7518       |       [Codepen](https://codepen.io/intHuang/pen/BaryKXB?editors=1010)        |     |
|      威爾#1694      |              [Codepen](https://codepen.io/WILL_Wu/pen/gOebryy)               |     |
|      瑞瑞#4605      |            [Codepen](https://codepen.io/tsai-li-ting/pen/KKowzjM)            |     |
|     fatni#5464      |          [Codepen](https://codepen.io/articlelife1224/pen/OJvPNKK)           |     |
|      Sin#0040       |        [Codepen](https://codepen.io/sophmfyt-the-sasster/pen/OJvPXbP)        |     |
|       44#6963       |               [Codepen](https://codepen.io/lin-b/pen/dymPXNa)                |     |
|      群嘉#3943      |        [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/RwMNRKz)        |     |
|       WH#5607       |      [CodePen](https://codepen.io/Wenhsin-hu/pen/jOzErvL?editors=1100)       |     |
|   Karol-Kuo#5287    |            [CodePen](https://codepen.io/ting-yu-kuo/pen/LYdEZqK)             |     |
|     JackC#0411      |              [CodePen](https://codepen.io/key0329/pen/YzaPGKX)               |     |
|     阿基基#2557     |              [CodePen](https://codepen.io/JIJI_GNI/pen/rNdaMOo)              |     |
|      鴨鴨#9822      |       [Codeprn](https://codepen.io/qrvrqvxv-the-selector/pen/VwXYKpa)        |     |
|     黑白兔#0684     |             [Codepen](https://codepen.io/johnny329/pen/bGvNwbR)              |     |
|   Andy Hung#3335    |            [Codepen](https://codepen.io/andyhung0723/pen/NWYPRYz)            |     |
|      小諾#1688      |              [Codepen](https://codepen.io/noichan/pen/abYzmjO)               |     |
|      狸貓#5863      |             [Codepen](https://codepen.io/tanuki320/pen/xxWbEMZ)              |     |
|      肯肯#1576      |               [Codepen](https://codepen.io/kkwcan/pen/VwXYKJW)               |     |
|    WEI_RIO#9342     |               [Codepen](https://codepen.io/wei_wu/pen/eYMmBOY)               |     |
|     Erwin#9851      |      [Codepen](https://codepen.io/c-hao-tsai/pen/PoRwboa?editors=1100)       |     |
|   Shalina123#3090   |             [Codepen](https://codepen.io/shalina123/pen/poLvEXm)             |     |
|      Chi#7605       |              [Codepen](https://codepen.io/YoChi84/pen/KKowgpo)               |     |
|  TsaiMinChun#8285   |              [Codepen](https://codepen.io/Tsai0926/pen/vYREygR)              |     |
|      Chun#7802      |         [Codepen](https://codepen.io/zpsamglw-the-bold/pen/yLKyVaL)          |     |
|      𝓛𝓊𝒸𝓎#8635      |              [Codepen](https://codepen.io/lucygirl/pen/BaryKyO)              |     |
|      雷雷#7844      |             [Codepen](https://codepen.io/lei-yi-jie/pen/vYREyRa)             |     |
|     Yunei#6323      |               [Codepen](https://codepen.io/Yunei/pen/OJvPbJw)                |     |
|      LINK#1933      |              [Codepen](https://codepen.io/miyayoe/pen/GRxgNYP)               |     |
|     rueee#7997      |               [Codepen](https://codepen.io/Jull-C/pen/ExEaZjo)               |     |
|   Grass立花#8094    |             [CodePen](https://codepen.io/kj25940858/pen/YzaPNNM)             |     |
|   suihsilan#9485    |             [CodePen](https://codepen.io/suihsilan/pen/mdxyREZ)              |     |
|     Henry#7386      |               [CodePen](https://codepen.io/h1nr9/pen/YzaPNQb)                |     |
|    NeilLin#3009     |              [CodePen](https://codepen.io/a0071421/pen/MWVYJQO)              |     |
|      阿蘇#8531      |       [CodePen](https://codepen.io/susu8327/pen/QWmwpWO?editors=1100)        |     |
|     Melon#0380      |              [CodePen](https://codepen.io/BalaFang/pen/wvmBJjm)              |     |
|      kai#1098       |               [Codepen](https://codepen.io/ahkai/pen/NWYPjxo)                |     |
|    Fanglin#4054     |            [Codepen](https://codepen.io/flynn841028/pen/qBoEmmj)             |     |
|     Gloria#1328     |             [Codepen](https://codepen.io/akeymaker/pen/YzaPQeo)              |     |
|    Tokyoyo#9509     |              [Codepen](https://codepen.io/tokyoyo/pen/PoRwjQP)               |     |
|      鉦勝#8333      |             [Codepen](https://codepen.io/atckmax823/pen/gOebRda)             |     |
|     黃士桓#7654     |           [codePen](https://codepen.io/shr-huan-huang/pen/KKowqGX)           |     |
|      咻蹦#1526      |              [codePen](https://codepen.io/emmasyu/pen/BaryZEQ)               |     |
|    siZunyo#3185     |           [codePen](https://codepen.io/yi-lun-jhuang/pen/JjLoyYQ)            |     |
|     SASIMI#5099     |            [codePen](https://codepen.io/sashimi1327/pen/gOebxoR)             |     |
|      小白#2406      |              [CodePen](https://codepen.io/bruno-yu/pen/dymPGrv)              |     |
|       Arista        |            [CodePen](https://codepen.io/arista-hsieh/pen/GRxgvBv)            |     |
|    Jamie Wu#9345    |              [CodePen](https://codepen.io/Wu220103/pen/XWEJaxr)              |     |
|    Yuan962#5897     |            [CodePen](https://codepen.io/Jasmine-Liao/pen/abYzyjz)            |     |
|   YunaHuang #2692   |       [CodePen](https://codepen.io/Yuna1002/pen/Barydvr?editors=1100)        |     |
|     Cliff#4606      |             [CodePen](https://codepen.io/Cliff_hex/pen/gOebGaz)              |     |
|  Ryan Chiang#6649   |      [Codepen](https://codepen.io/ryanchiang/pen/vYREeXp?editors=1100)       |     |
|      Vera#5592      |               [Codepen](https://codepen.io/skvera/pen/mdxyBmK)               |     |
|      QOO#8446       |              [Codepen](https://codepen.io/QOOQOOQ/pen/dymPzaN)               |     |
|   浪裡小白龍#6860   |        [Codepen](https://codepen.io/Emillo/pen/mdxyBXG?editors=1100)         |     |
|      肉魚#2149      |             [Codepen](https://codepen.io/zoechen13/pen/WNzbZYN)              |     |
|       GL#2256       |               [Codepen](https://codepen.io/4genie/pen/jOzEGvE)               |     |
|     Halla#0431      |     [Codepen](https://codepen.io/wawykddh-the-typescripter/pen/WNzbZZq)      |     |
|       YC#2522       |                [CodePen](https://codepen.io/YCLu/pen/Barymzy)                |     |
|      君君#3585      |             [CodePen](https://codepen.io/junjun2022/pen/OJvPOpP)             |     |
|     Jason1#2538     |        [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/vYREWYv)        |     |
|     Vian #7338      |              [CodePen](https://codepen.io/vianwu31/pen/wvmBPEz)              |     |
|   LinaChen #1796    |              [CodePen](https://codepen.io/LinaChen/pen/eYMmejM)              |     |
|     Randy #0393     |      [CodePen](https://codepen.io/randy820113/pen/JjLoOBw?editors=1100)      |     |
|     Hsiu #8767      |       [CodePen](https://codepen.io/amy-hsiao-the-scripter/pen/abYzVMP)       |     |
|       YU#0618       |               [CodePen](https://codepen.io/yoken_/pen/KKowyrX)               |     |
|   Winnie Wu #5468   |        [CodePen](https://codepen.io/Pooh-Wu/pen/abYzEzM?editors=1100)        |     |
|    IreneY #0086     |         [CodePen](https://codepen.io/HalfPlannedJourney/pen/wvmBpWq)         |     |
|   我是泇吟 #5189    |              [CodePen](https://codepen.io/kljuqbxs/pen/gOebomm)              |     |
|  Erichooojop#8199   |              [codePen](https://codepen.io/lumedkle/pen/QWmwapm)              |     |
|      yu魚#1330      |               [CodePen](https://codepen.io/Yu_yu/pen/yLKypMx)                |     |
|     逸川 #6319      |            [CodePen](https://codepen.io/bryanlin8911/pen/zYWxpEV)            |     |
|     ssozr #4680     |               [CodePen](https://codepen.io/ssozr/pen/WNzbdyy)                |     |
|     Joyce#3790      |      [CodePen](https://codepen.io/joycehuang/pen/MWVYrZR?editors=1100)       |     |
|   smallmi80#3735    |            [CodePen](https://codepen.io/smallmimi80/pen/poLomNo)             |     |
|     艾芮絲#6060     |             [CodePen](https://codepen.io/wangyingju/pen/PoRwErR)             |     |
|      鑫鑫#4346      |       [CodePen](https://codepen.io/Neil1024/pen/WNzbMbL?editors=1100)        |     |
|      柏PO#5617      |              [CodePen](https://codepen.io/apo_1798/pen/MWVYQwN)              |     |
|   Susie(軒)#6181    |              [CodePen](https://codepen.io/Codeleaf/pen/gOebvWj)              |     |
|     Mylène#2481     |            [CodePen](https://codepen.io/hamajibashi/pen/KKowoom)             |     |
|     阿泡泡#7881     |              [CodePen](https://codepen.io/Apaopao/pen/ZExYMbj)               |     |
|      阿武#9488      |             [CodePen](https://codepen.io/samwnkyat/pen/eYMmLBQ)              |     |
|     GARBO#6659      |             [CodePen](https://codepen.io/garbo8130/pen/wvmBEYm)              |     |
|   Ming Juan #0071   |               [CodePen](https://codepen.io/M-Juan/pen/zYWxmgz)               |     |
|   jin.huang#4666    |             [CodePen](https://codepen.io/ruby828387/pen/gOebQaJ)             |     |
|   AhChiaZoe#8535    |        [CodePen](https://codepen.io/ZoeTeng/pen/YzaPRyR?editors=1100)        |     |
|     pidder#7315     |             [CodePen](https://codepen.io/pidderliao/pen/XWEJKbz)             |     |
|  Kyle, Chuang#1892  |               [CodePen](https://codepen.io/hohayo/pen/bGvNQLp)               |     |
|      艾草#4830      |       [CodePen](https://codepen.io/jmkhsutp/pen/rNdaoYR?editors=1010)        |     |
|      hua#9099       |                [Codepen](https://codepen.io/LHua/pen/JjLowpj)                |     |
|      得源#8355      |              [CodePen](https://codepen.io/aglgvsie/pen/YzaPVjv)              |     |
|   christina#6185    |             [CodePen](https://codepen.io/chrisc0210/pen/yLKyZyW)             |     |
|   Jeff Lin #4717    |       [CodePen](https://codepen.io/toqzvyeq-the-scripter/pen/mdXGVWK)        |     |
|      yen #5757      |           [CodePen](https://codepen.io/TZU-HUANG-YEN/pen/bGvNZLp)            |     |
|     Fang #4680      |              [CodePen](https://codepen.io/std95174/pen/zYWxbXJ)              |     |
|    Van.CS #2067     | [CodePen](https://codepen.io/fbacojji-the-selector/pen/rNdabJR?editors=1100) |     |
|   Iris Huang#6727   |              [CodePen](https://codepen.io/ythuang/pen/XWEJLmg)               |     |
|       Ke#1391       |             [CodePen](https://codepen.io/federerke/pen/yLKymvR)              |     |
|     CJ07 #0176      |             [CodePen](https://codepen.io/cjtseng07/pen/VwXLZeb)              |     |
|     bakiii#2652     |               [CodePen](https://codepen.io/aki168/pen/JjLdPEb)               |     |
|   Sentiments#4883   |             [CodePen](https://codepen.io/Sentiments/pen/eYMNYNv)             |     |
|     color #4378     |       [Codepen](https://codepen.io/color0602/pen/QWmbwwM?editors=1100)       |     |
|      Shuo#1596      |          [CodePen](https://codepen.io/chiangchungshuo/pen/abYOzPb)           |     |
|     KJ T.#8381      |            [CodePen](https://codepen.io/leontsai218/pen/KKopNyj)             |     |
|      mei #8421      |             [CodePen](https://codepen.io/Shila-Chen/pen/LYdVxYQ)             |     |
|    Jie Du #4493     |       [CodePen](https://codepen.io/qgqonost-the-flexboxer/pen/bGvdveb)       |     |
|     肉桂卷#0625     |        [CodePen](https://codepen.io/ginnlee/pen/GRxJxGV?editors=1100)        |     |
|       YI#0863       |               [CodePen](https://codepen.io/YI0305/pen/oNqXqmm)               |     |
|     Cream#3449      |        [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/WNzvJVy)        |     |
|     Yu An #1572     |              [CodePen](https://codepen.io/yuan0401/pen/yLKNxBz)              |     |
|    Chi_Chen#3755    |             [CodePen](https://codepen.io/akichen27/pen/VwXLqvJ)              |     |
|    jason so#3921    |              [CodePen](https://codepen.io/jasonso/pen/gOepZgr)               |     |
|      Pony#6778      |              [CodePen](https://codepen.io/Pony0303/pen/PoRqXbz)              |     |
|  bonnieli1414#4906  |     [CodePen](https://codepen.io/bonnieli1414/pen/WNzvqWG?editors=1100)      |     |
|     紙飛機#1335     |            [CodePen](https://codepen.io/paperplanea/pen/QWmbeaO)             |     |
| skypassion5000#4151 |           [CodePen](https://codepen.io/skypassion5000/pen/LYdVwQw)           |     |
|      Cola#1583      |              [CodePen](https://codepen.io/Cola865/pen/xxWwGaE)               |     |
|     Barret#1119     |             [CodePen](https://codepen.io/barret0720/pen/BarojEd)             |     |
|      MOMO#3370      |             [CodePen](https://codepen.io/chiuyuchun/pen/QWmjdLX)             |     |
|      Gui#9571       |             [CodePen](https://codepen.io/guitimliu/pen/bGvVYqP)              |     |
|   Leo Song #8278    |       [Codepen](https://codepen.io/sunnylaba/pen/OJvyOdL?editors=1100)       |     |
|   Emily Hsi #9066   |              [Codepen](https://codepen.io/EmilyHsi/pen/NWYGXrR)              |     |
|   Scottie  #3850   |              [Codepen](https://codepen.io/wow767t/pen/YzayeQN)              |     |
|   pudding#2006   |              [Codepen](https://codepen.io/yushujhen/pen/KKodBqp)              |     |
|家洋#6999|[Codepen](https://codepen.io/yang940648/pen/YzayJjQ)|
|Jase#1996|[Codepen](https://codepen.io/yvfxyvms/pen/XWEmyPg)|
|吉米阿民#8049|[Codepen](https://codepen.io/yinminlin/pen/YzawPBP)|
|Daisy_li#4231|[CodePen](https://codepen.io/lidairong-gmail-com/pen/YzawXWq)|  |
|Han Lai|[CodePen](https://codepen.io/x94han/pen/YzawXpW)|  |
|Jenny真#7532|[CodePen](https://codepen.io/wei-chen-wu/pen/GRxopWX)||
|Carrie#2750|[CodePen](https://codepen.io/carrie-wang/pen/GRxomWW)||
|zaii#7472|[CodePen](https://codepen.io/ivy2846357/pen/xxWZJER)||
|     Jo Yun #8899     |              [CodePen](https://codepen.io/Jo_Yun/pen/mdxVGrY)              |     |
|Kevin#6131|[CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/MWVKzgM)||
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/rNdxoyG?editors=1100)||
| Suyan #7529 |        [Codepen](https://codepen.io/suyan_echo/pen/jOzWJyo)||
|jeter#8014  |[Codepen](https://codepen.io/gi-tai-she/pen/bGvpwjp?editors=1100)||
|Nini Chen #5790  |[Codepen](https://codepen.io/ninistyle/pen/WNzvqKr)||
|wlc #4877  |[Codepen](https://codepen.io/arxmyifs/pen/XWEdPOZ?editors=1100)||
|erwin阿瀚 #5422  |[Codepen](https://codepen.io/yohey03518/pen/qBoZQqN)||
|薏慈#3795  |[Codepen](https://codepen.io/its_wang/pen/yLKOZqq)||
|小許 #9885 | [Codepen](https://codepen.io/xu75/pen/zYWBzeq)
|YaWen #2752 | [Codepen](https://codepen.io/yuwendy/pen/JjLKrPa)
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/BarLyRM)||
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/RwMGxmE)||
|yuchenye #6119|[CodePen](https://codepen.io/yuchen/pen/VwXKRjL)||
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/LYdbYJp)||
|Clara Cai#7097|[CodePen](https://codepen.io/Clara-Snowy/pen/QWmwoKN)||
|Dingy#2931|[CodePen](https://codepen.io/dingy-xiao/pen/VwXmvoP?editors=1100)
|iamYanYan#9422|[CodePen](https://codepen.io/yayayanns/pen/YzapqQB)
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/OJvbNOJ)
|ROKA#4051|[CodePen](https://codepen.io/chengchiaoyi/pen/gOeLMzW?editors=1100)
|Nathan James#8120|[CodePen](https://codepen.io/ufo060204/pen/xxWRgLo)
|sophiee#7015|[CodePen](https://codepen.io/sophiee2727/pen/poLNWBr)
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/GRxrJve)
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/XWEpVjL)
|EmilyLin#0526|[CodePen](https://codepen.io/c199615/pen/PoRWgwm)
|WEI#0797|[CodePen](https://codepen.io/wei-z/pen/dymWeQG)
|yuling#1634|[CodePen](https://codepen.io/igzdflpu/pen/vYRmbqj)
|KarenChan#4625|[CodePen](https://codepen.io/ruruchan7/pen/YzaxrbQ)
|鄭小蛙#3528|[CodePen](https://codepen.io/libclf/pen/abYLMRB)
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/yLKpNeb)
|Jumpye#8601|[CodePen](https://codepen.io/Jumpye/pen/BarJxve?editors=1100)
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/XWEEgdq)
|DoraHunag#8223|[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/VwXgdPE)
| Velma#1693|[CodePen](https://codepen.io/Ze1225/pen/RwyKPbb)