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

## 推擠方向

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

<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>

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

> 需加上 CSS Reset

## 回報流程

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


<!-- 解答：只需要看是否有統一推擠方向，所以全部改使用 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)