---
tags: 網頁切版直播班 - 2021 夏季班
---
{%hackmd theme-dark %}
# 7/8(四) 每日任務

## 問題

題目中部分元素已經有 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 mb-1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

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

### Ans:

<div class="wrap">
        <h1 class="title mb-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 mb-1">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>