# 🏅 Day 2 - margin、padding 運用與 img 標籤使用細節

## margin、padding
### margin
調整元素外邊距，**向外**推出元素與元素之間的間距、留白。
示意圖：

### padding
調整元素內邊距，**向內**推出外層與內層元素之間的間距、留白，或是 border 與元素內容之間的留白。
示意圖：

## img 標籤
瀏覽器預設圖片下方會有 2 ~ 3 px 空隙

示意：
> 圖片下方與 p 標籤會有一小部分空隙

<!-- 需記得載入 CSS Reset -->
<img src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="圖片">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo nostrum officiis aspernatur.</p>

需在 img 上設定 CSS `display` 或是 `vertical-align` 屬性，來移除此空隙
避免與實際設計稿的元素間距不同。

詳細可再參考此文章：[img 下方不明空隙](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)

### 相關影音章節：
- CSS - 使用 CSS 變更 HTML 標籤特性

題目
---
延續前一天題目，複製此[模板](https://codepen.io/hexschool/pen/yLwreeL)，依照下圖運用 margin、padding 為元素加上間距設定。
（只需調整 CSS 區塊內 `＊` 的地方）
> - 「部落格」上方有 96px 留白間距
> - 「部落格」與左側線條間距 16px
> - 「部落格」與下方圖片間距 32px
> - 圖片與下方文字間距 16px（記得移除圖片預設下方空隙）
> - 「2020 Valentine’s Special」與下方文字間距 16px

模板與解答皆有載入 CSS Reset 清除瀏覽器預設設定，
使用 Codepen 可直接在 `Settings > CSS > CSS Base > Reset` 設定

## 回報流程

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


<!-- 解答：
https://codepen.io/hexschool/pen/GReLpzQ
-->

回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

| Discord | CodePen／答案 |
|:----------:|:--------------------:|
| xxx | [CodePen]() |