---
# System prepended metadata

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

---

# 🏅 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](https://codepen.io/fhljksmg-the-styleful/pen/pvvBJqg?editors=1100)，並讓推擠方向一致。
示意圖：
![](https://hackmd.io/_uploads/r1st3THZxx.png)


## 回報流程

將答案寫在 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   |   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](連結) | -->