# 🏅 Day 6 - box-model

Box Model（盒模型）指的是任一個 HTML 元素本體，主要由以下四個內容組成：
* 內容（Content）：元素實際的內容區塊，例如文字、圖片
* 內邊距（Padding）：內容與邊框之間的部分
* 邊框（Border）：內邊距與外邊距之間的線條
* 外邊距（Margin）：邊框與其他元素之間的空間

## 題目
了解 [box-model](https://www.oxxostudio.tw/articles/202008/css-box-model.html) 概念後，從以下程式碼計算出 .box 實際高度（不可透過開發人員工具觀察），並將答案寫至 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/qEEwdvx?editors=1100) 內

### 畫面呈現

**文字部分以兩行高度為準**


### HTML

<div class="box">
  <p class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, provident sed illum recusandae nobis quidem? Cum nostrum, ab consectetur dolore fuga odit animi, debitis non quam deleniti sit numquam pariatur.
  </p>
  <img class="image" src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="ithome">
</div>     

### CSS

.box {
  border: 2px solid #000;
}
.text{
  font-size: 16px;
  line-height: 24px; 
  margin-bottom: 30px;
}
.image{
  height: 30px;
  display: block;
}

## 回報流程

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


<!--
解答：
行高 24*2行 ＋ margin-bottom 30px + image height 30px + border 上下 2px*2，
所以 .box 高度是 112px
-->

### 回報區

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1 | Saika | [Codepen](https://codepen.io/saika4501/pen/vEOQdKy?editors=1100)|
| 2 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/QwbJQKx?editors=1100)|
| 3 | Jenna | [Codepen](https://codepen.io/abiscc14/pen/JodepOG)|
| 4 | 那個貓貓 | [Codepen](https://codepen.io/zorakao/pen/GgJwQvv)|
| 5 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/bNdQLoM?editors=1100)|
| 6 | jchunnn | [Codepen](https://codepen.io/jchunnn/pen/GgJwQQM)|
| 7 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/jEPQZxX?editors=1100)|
| 8 | Tetsu | [Codepen](https://codepen.io/ttgchang/pen/NPqEyYL)|
| 9 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/KwprQXr)|
| 10 | 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/GgJwQbd)|
| 11 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/azOQYOB?editors=1100)|
| 12 | 冠翔 | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/ZYGmxzY)|
| 13 | Yanchen16 | [Codepen](https://codepen.io/keyrtlij-the-reactor/pen/QwbJmwR)
| 14 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/ZYGmxKW)|
| 15 | Jerome | [Codepen](https://codepen.io/qsc002163/pen/MYwzVvy)|
| 16 | pastor | [Codepen](https://codepen.io/peter_hung/pen/RNPqMoJ)|
| 17 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/ogXQqra)|
| 18 | 7Lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ByNGxWK?editors=1100)|
| 19 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/YPXRLvz)|
| 20 | 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/QwbJreQ?editors=1100)|
| 21 | Klaus Chen | [Codepen](https://codepen.io/Klaus-Chen/pen/yyNQEPZ?editors=1100)|
| 22 | suemma | [Codepen]([連結](https://codepen.io/suemma/pen/azOQKPN))|
| 23 | Sylvie | [Codepen](https://codepen.io/shuping-xiao/pen/wBaQXZY?editors=1100)|
| 24 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/ByNGPMB?editors=1100)|
| 25 | Kiku | [Codepen](https://codepen.io/Li-Kusa/pen/QwbJZwQ?editors=1100)|
| 26 | Fan | [Codepen](https://codepen.io/btsihioy-the-reactor/pen/yyNQRWm?editors=1100)|
| 27 | Peggy | [Codepen](https://codepen.io/Peggy_C/pen/YPXRJbr)|
| 28 | Sid | [Codepen](https://codepen.io/monkeybear721/pen/qEdQQxp)|
| 29 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/pvJQqzN)|
| 30 | Chris Wang | [Codepen](https://codepen.io/Wang-Chris/pen/gbpQZjr)|
| 31 | Celia | [Codepen](https://codepen.io/Cindy-Ho/pen/KwprJqG)|
| 32 | kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/NPqEoMB)|
| 33 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/pvJQOad?editors=1100)|
| 34 | Mumu | [Codepen](https://codepen.io/ztz_mu/pen/WbvYmvm)|
| 35 | 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/PwqxLxv)|
| 36 | CBK | [Codepen](https://codepen.io/BK-C-the-styleful/pen/xbGQeXy)|
| 37 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/emNbmYR)|
| 38 | Zhi | [Codepen](https://codepen.io/aneeiitk-the-typescripter/pen/pvJqvEe)|
| 39 | 立花 | [Codepen](https://codepen.io/kj25940858/pen/bNdOddr?editors=1100)|
| 40 | zhe | [Codepen](https://codepen.io/dotheright/pen/pvJqbzm)|
| 41 | Huang Eagle | [Codepen](https://codepen.io/YuCi/pen/zxGyBwK)|
| 42 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/gbpZwda?editors=1100)
| 43 | Evelyn | [Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/yyNQQeL)|
| 44 | ahga | [Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/RNPEjGQ)|
| 45 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/vEOvWeR)|
| 46 | TY | [Codepen](https://codepen.io/Ted-Y/pen/XJbozVj?editors=1100)|
| 47 | Yan* | [Codepen](https://codepen.io/Yan-L/pen/EajGQNJ?editors=1100)|
| 48 | Elvina | [Codepen](https://codepen.io/Elvina-the-selector/pen/KwpbQGr?editors=1100)|
| 49 | kate_bearchou| [Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/dPowQZV?editors=1100)|
| 50 | PK| [Codepen](https://codepen.io/Percy-Ku/pen/myJaZyB)|
| 51 | YUCCC | [Codepen](https://codepen.io/taroooo/pen/RNPEzBJ?editors=1100)|
| 52 | Geno Chen | [Codepen](https://codepen.io/kai-chen-the-sans/pen/GgJPVvb)|
| 53 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/JodxEzJ?editors=1100)|
| 54 | Doreen翠翠翠 | [Codepen](https://codepen.io/cuei-sian-Wang/pen/pvJGRGv?editors=1100)|
| 55 | 孟 | [Codepen](https://codepen.io/Mengru0503/pen/XJbOMmM)|
| 56 | 社子畢卡索 | [Codepen](https://codepen.io/pen?template=yyNZXKB)|
| 57 | 西娜 | [Codepen](https://codepen.io/Sheena-the-encoder/pen/PwqVjLx?editors=1100)|
| 58 | NellyGuo | [Codepen](https://codepen.io/NNN-the-selector/pen/RNPvLPw?editors=1100)|
| 59 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/yyNZbXj)|
| 60 | Space key | [Codepen](https://codepen.io/uuajlwse-the-selector/pen/myJvXmV)|
| 61 | Michelle | [Codepen](https://codepen.io/bastar_dize/pen/WbvPyWz?editors=1100)|
| 62 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/YPXgVLP)|
| 63 | 牛奶嘎 | [Codepen](https://codepen.io/Joyce-Niu/pen/NPqJgee)|
| 64 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/vEOPJNR)|
| 65 | 随縁 | [Codepen](https://codepen.io/anki0072011/pen/dPowOBv)|
| 66 | Fang | [Codepen](https://codepen.io/Fang-the-encoder/pen/ByNbbEP?editors=1100)|
| 67 | teresa | [Codepen](https://codepen.io/teresa150029/pen/wBaOVqZ)|
| 68 | tanuki_狸貓 | [Codepen](https://codepen.io/tanuki320/pen/KwpYmgN?editors=1100)| -->
| 69 | Scrooge | [Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/LEVvLxE?editors=1100)|
| 70 | Alyssa | [Codepen](https://codepen.io/AlyssaYen/pen/WbvWOOz?editors=1100)|
| 71 | ja4071 | [Codepen](https://codepen.io/SHAO-L/pen/vEOMzba)|
| 72 | Rogan | [Codepen](https://codepen.io/fhljksmg-the-styleful/pen/qEEwdvx?editors=1100)|
| 73 | NGNLzenos | [Codepen](https://codepen.io/xmijbzdb-the-animator/pen/vEOqvxy)|
| 74 | 平平 | [Codepen](https://codepen.io/ypinpin/pen/emNqNwW)|
| 75 | Atian | [Codepen](https://codepen.io/A-Tian-Chen/pen/EajqZvR)|
| 76 | World | [Codepen](https://codepen.io/HexschoolVuePujols/pen/VYLoMMy)|
| 77 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/full/vEOoQBV)|
| 78 | Ching | [Codepen](https://codepen.io/huangching/pen/GgpKbbK) |
| 79 | B | [Codepen](https://codepen.io/Babel777/pen/jEbOoMK?editors=1100) |
| 80 | 加菲 | [Codepen](https://codepen.io/DOU-CF/pen/dPYPwer?editors=1100)
| 81 | Mini | [Codepen](https://codepen.io/miiinii32-Cheng/pen/KwdwLmR)
| 82 | 李大維 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/wBaVdGQ)|
| 83 | 雅潔 | [Codepen](https://codepen.io/MOMOYA/pen/YPyXyEE)|
| 84 | Fancy | [Codepen](https://codepen.io/Fancy-the-lessful/pen/OPyVNax)|
| 85 | Bee | [Codepen](https://codepen.io/Bee-Lu/pen/GgpJxBG)|
| 86 | Lika | [Codepen](https://codepen.io/Bee-Lu/pen/GgpJxBG)|
| 87 | 伊迪 | [Codepen](https://codepen.io/eku10rei/pen/MYawNLo?editors=1100)|
| 88 | water | [Codepen](https://codepen.io/wateruby/pen/bNVVdbp)|
| 89 | Lucy | [Codepen](https://codepen.io/Lucytrycode/pen/VYveapR)|
| 90 | 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/GgpoWvX)|
|91| 小趴| [Codepen](https://codepen.io/papa2415/pen/VYvabeB)
| 92 | 阿鍋 | [Codepen](https://codepen.io/YING-TING-KUO/pen/pvjbJXP)|
|93|cindy |[Codepen](https://codepen.io/a50134/pen/XJmKoqW)
| 94 | Va | [Codepen](https://codepen.io/lichenValin/pen/EaVgEPo)|
| 95 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/bNVwzwQ?editors=1100)|
| 96 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/jEbVqGo)|
| 97 | maerc | [Codepen](https://codepen.io/Lu-Liangyu/pen/zxvNLJd?editors=1100)|
| 98 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/xbwgNbv)|
| 99 | Midy Wu | [Codepen](https://codepen.io/work-wu/pen/vENeGLQ)|
| 100 | Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/zxvEmmR)|
| 101 | 4ping | [Codepen](https://codepen.io/928Libra/pen/yyYjvxZ)|
| 102 | PAgaNiNi | [Codepen](https://codepen.io/PA-OTTER/pen/KwdEwKq?editors=1100)|
| 103 | 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/xbZKZNX?editors=1100)|
---

---

<!-- | # | 名稱 | [Codepen](連結)| -->