---
# System prepended metadata

title: 7/7(三) 每日任務
tags: [大學生體驗營 - 2021 夏季班]

---

---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/7(三) 每日任務

## 問題

題目中部分元素已經有 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;
}

```

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～


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

<!-- 解答：只需要看是否有統一推擠方向，所以全部改使用 mt-1 或是 mb-1 都是對的唷 -->


回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/BaWYJLP
-->

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/gOmejMa 
-->

<!-- 2.孫 
https://codepen.io/Sunne/pen/dyvrvEJ-->

<!-- 3.彥碩
Codepen：https://codepen.io/nelsonsu/pen/jOmqrvw -->

<!-- 4.羿宣
Codepen：https://codepen.io/Ann828/pen/wvdGWEz?editors=1100 -->

<!-- 5.小羊
Codepen：https://codepen.io/eqsmebaz-the-selector/pen/WNjwxgp -->

<!-- 6.玉凌
Codepen：https://codepen.io/ruby376758123/pen/VwbajVo -->

<!-- 7. 書妤
Codepen：https://codepen.io/shuyu227/pen/eYWZzwj -->

<!-- 8. 黃珮雯
Codepen：https://codepen.io/pwh_27/pen/rNmeMVQ -->

<!-- 9. 黃彩雲
Codepen: https://codepen.io/corin19/pen/dyWMpoy -->

<!-- 10. 薰
Codepen：https://codepen.io/chiaoshin/pen/LYyNRRY -->


<!-- 11. 湯士弘
Codepen：https://codepen.io/jsht-the-animator/pen/xxdVEgv -->

<!-- 12.Cloudia
Codepen:https://codepen.io/hkps87/pen/VwbaKpe -->

<!-- 13. Iris
Codepen: https://codepen.io/hungyen/pen/oNWxzGj -->

<!-- 14. 姚小芸
Codepen: https://codepen.io/crazzyamy/pen/zYwqKJO -->

<!-- 15. 蕭絜云
Codepen https://codepen.io/cloudy_77/pen/wvdGzZX -->

<!-- 16. 陳瑋崗
Codepen https://codepen.io/weigang-chen/pen/PomNGrR -->

<!-- 17. Genie
Codepen：https://codepen.io/hcliii/pen/zYwqoOG -->

<!-- 18. Jack
Codepen：https://codepen.io/JackChen89/pen/RwVaopM -->

<!-- 19. 黃郁芳
Codepen：https://codepen.io/YuFang0323/pen/gOWrLxd -->

<!-- 20. 小胖
COdepen：https://codepen.io/a1073315/pen/gOWrLWj -->

<!-- 21. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/rNmeWze 
-->

<!-- 22.小松
Codepen:https://codepen.io/120061203/pen/KKmzayW
-->

<!-- 23. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/ExmKWZz
-->

<!-- 24. 馮旻萱
Codepen：https://codepen.io/tboqkvhk/pen/gOWrWPz
-->

<!-- 25. 劉子瑜
Codepen：https://codepen.io/superfish195/pen/RwVaVzq
-->

<!-- 26. 人中
Codepen：https://codepen.io/renchong2424/pen/dyWMzJG
-->

<!--27.廖奕慈
Codepen:https://codepen.io/yiciLiao/pen/QWvNqgR
-->

<!--28. 辰
Codepen:https://codepen.io/dnangelapril/pen/oNWxozP
-->

<!--29. 德德
Codepen:https://codepen.io/Chiouder/pen/XWRdVVQ
-->

<!--30. 劉永琦
Codepen:https://codepen.io/wjsvypvv-the-decoder/pen/jOmqZmo
-->

<!--31. 廖仕雅
Codepen:https://codepen.io/sophia0121/pen/vYmGagb
-->

<!--32. Steve
Codepen:https://codepen.io/steve5631/pen/RwVaqjm 
-->

<!-- 32. 琦耀
Codepen：
https://codepen.io/john_W/pen/XWRdOGp
-->

<!-- 32. 霈楹
Codepen：
https://codepen.io/nrweahgl-the-selector/pen/zYwBoqx
-->

<!-- 33.陳方云
Codepen：
https://codepen.io/ssnnny/pen/jOmrvWw?editors=1100 
-->

<!-- 34.劉依玫
Codepen：
https://codepen.io/meiliu24a/pen/OJmRzJJ 
-->

<!-- 35.張筱萱
Codepen：
https://codepen.io/big-banana/pen/rNmjGvo 
-->