---
# System prepended metadata

title: "\U0001F3C5 Day 6 - box-model"
tags: [網頁切版直播班 - 2024 夏季班]

---

# 🏅 Day 6 - box-model

請問 .box 實際高度是多少？(請不要用瀏覽器觀察)

## 畫面呈現

**文字部分以兩行呈現為準**

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

### HTML

```htmlembedded=
<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

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

## 回報流程

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

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

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

### 回報區

|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1   |Jainee   | [Codepen](https://codepen.io/Jainee0110/pen/ExzzYMw)|
| 2   |hao jing   | [Codepen](https://codepen.io/hjxu/pen/RwmmZeV)|
| 3 | han |[Codepen](https://codepen.io/iamHanCheng/pen/mdYLvNg)|
| 4 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/VwOJqao)|
| 5 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/QWRXzwp?editors=1100)|
| 6 | Thoeodore | [Codepen](https://codepen.io/GustavoFringgg/pen/MWdMZyr) |
| 7 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/OJYerXX) |
| 8 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/wvbLRzo?editors=1100) |
|9|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/YzbodpK)|
| 10 | Lobinda|[Codepen](https://codepen.io/Lobinda/pen/GRabPMZ)|
| 11 | 俊|[Codepen](https://codepen.io/jun12079/pen/gOJNZKL)|
| 12 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/zYQVypy) | 
| 13 | n913239 | [Codepen](https://codepen.io/n913239/pen/eYawbPb) |
| 14 |Chloe_墨|[Codepen](https://codepen.io/ChloeTseng1026/pen/WNBqLad)|
| 15 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/dyEBwaY) |
| 16 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/GRabzyQ) |
| 17 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/bGyPzXJ?editors=1100) |
| 18 | Eason | [Codepen](https://codepen.io/eulvmmbq-the-typescripter/pen/abrgMbW?editors=1100) |
| 19 | GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/gOJNELq) |
| 20 | Angela_la| [Codepen](https://codepen.io/Angela-the-builder/pen/LYoKaNe?editors=1100) |
| 21 | Tippy| [Codepen](https://codepen.io/Ektodor-Wang/pen/yLWdwMJ) |
| 22 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/GRabewV) |
| 23 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/YzbogjB) |
| 24 | Mike | [Codepen](https://codepen.io/mike2049/pen/PovrgqP?editors=1100) |
| 25 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/VwOJNpZ) |
| 26 | Anna |[codepen](https://codepen.io/Anna-Teng/pen/rNgEbWK)|
| 27 | 黑嚕嚕 | [Codepen](https://codepen.io/wzokvjha-the-vuer/pen/NWVZmEw) |
| 28 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/LYoKvOw?editors=1100) |
| 29 | kawa | [Codepen](https://codepen.io/z83xji6/pen/dyEBLBG) |
 | 30| Aura Tao | [Codepen](https://codepen.io/AURATAO/pen/LYoKoGN) |
 | 31 | KUN. | [Codepen](https://codepen.io/barry91205/pen/BaegewV) |
 | 32 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/VwOJJYX) 
 | 33 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/BaeggKE)
 | 34 | N7 | [Codepen](https://codepen.io/neohyntw/pen/qBGzzap)
| 35 | jamesct34 | [Codepen](https://codepen.io/JCT34/pen/OJYeeyd) |
| 36 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/eYawwXG) |
| 37 |OSN|[Codepen](https://codepen.io/osncodepen/pen/dyEBBaw)|
| 38 |咖|[Codepen](https://codepen.io/daru-Ga/pen/MWdMNrG)|
| 39 | MY | [Codepen](https://codepen.io/ahmomoz/pen/WNBqVJZ) |
| 40 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/ExzBqpM?editors=1100)|
| 41 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/WNBqVad) |
| 42 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/yLWdmrx) |
| 43 | andersono666 | [Codepen](https://codepen.io/goodmanbuild/pen/KKLOPab) |
| 44 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/JjqgPEG) |
| 45 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/BaeXBwV?editors=1100) |
| 46 | Enn | [Codepen](https://codepen.io/enntang/pen/WNBVeZY) |
| 47 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/BaeXBYP) |
| 48 | wind | [Codepen](https://codepen.io/wind7y/pen/NWVQKQm) |
| 49 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/pomMoyJ?editors=1100) |
| 50 | Jim | [Codepen](https://codepen.io/JimChou/pen/jOogOqO) |
| 51 | 嚼勁 | [Codepen](https://codepen.io/James520284/pen/YzbmKme) |
| 52 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/XWwvrqb) |
| 53 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/PovMwjz) |
| 54 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/rNgXaRP)|
| 55 |邵|[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/ExzqKRP)|
| 56 | Glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/eYaqzYJ) |
| 57 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/ExzqgEG) |
| 58 | yoishere | [Codepen](https://codepen.io/yoishere/pen/qBGeqmZ) |
| 59 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/pomMeze) |
| 60 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/RwmXprX) |
| 61 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/RwmXVjZ) |
 | 62 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/BaeXLpz) |
 | 63 | Jackeatapple | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/WNBVOgQ) |
 | 64 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/rNgXGwX) |
 | 65 | .tsz_ying |[Codepen](https://codepen.io/bekgnohe-the-selector/pen/wvbVpKM)|
 | 66 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/WNBVEjp) |
 | 67 | anson-tsai | [Codepen](https://codepen.io/vuogajlx-the-vuer/pen/RwmXyeW?editors=1100) |
| 68 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/wvbVgXw) |
| 69 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/oNRKyMB) |
| 70 | hoyiiiii | [Codepen](https://codepen.io/hoyii/pen/dyExjjj) |
| 71 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/OJYEyeb) |
| 72 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/KKLOLde) |
| 73 | ray | [Codepen](https://codepen.io/rayychenn/pen/qBzWdQN) |
| 74 | Ollie | [Codepen](https://codepen.io/daiyy97/pen/NWZKqQE) |
| 75 | Enzo | [Codepen](https://codepen.io/JasonHo_HYC/pen/rNEBxaz) |
| 76| TONY名彤 | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/bGPbEeE) |
| 77 | smallr1229 | [Codepen](https://codepen.io/Smallr/pen/mdZbEva) |
| 78 | jeffjoe486 | [Codepen](https://codepen.io/Jeff-K-the-selector/pen/jOjNVYv) |
 | 79 | 星雨 | [Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/ExBYZmN) |
  | 80 | emmayo | [Codepen](https://codepen.io/emmayo/pen/NWZKpmj) |
  | 81 | neoyo | [Codepen](https://codepen.io/Neo-oo/pen/WNqejGd) |
  | 82 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/GRbKyYJ?editors=1100) |
| 83 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/NWVQONy) |
| 84 | icesea25 | [Codepen](https://codepen.io/icesea25/pen/PorYgwv) |
| 85 | Show21 | [Codepen](https://codepen.io/t10026706/pen/dyBbLOg?editors=1100) |
| 86 | shine_lalala | [Codepen](https://codepen.io/cdjpjets-the-solid/pen/OJeJVzg) |
| 87 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/eYwYZyb) |
| 88 | xcx100 | [Codepen](https://codepen.io/c13026/pen/rNENeog) |
| 89 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/ZEdELxG?editors=1100) |
| 90 | .sytiny | [Codepen](https://codepen.io/emma6542/pen/JjQjypZ?editors=1100) 
| 91 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/JjQjMaB)
| 92 | iamcan | [Codepen](https://codepen.io/pen/?editors=1100)
| 93 | Matt BB | [Codepen](https://codepen.io/mm3248965/pen/yLdygzr) |
| 94 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/jOjEpmv) |
| 95 | macihuang | [Codepen](https://codepen.io/macy1215/pen/GRbgXJG) |
| 96 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/mdZyvYE) |
| 97 | Emma | [Codepen](https://codepen.io/Emma0919/pen/RwzNOLY) |
| 98 | xiang5141 | [Codepen](https://codepen.io/XIANG-XIANG/pen/dyBooab) |
| 99 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/GRbJZvR) |
| 100 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/rNEVvNN) |
| 101 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/qBzdKgv) |
| 102 | zen | [Codepen](https://codepen.io/zen742937/pen/WNqvKMJ) |
| 103 | chris | [Codepen](https://codepen.io/chrischen666/pen/LYKVXaZ?editors=1100) |
| 104 | phoebeee427 | [Codepen](https://codepen.io/zvndazxy-the-vuer/pen/poXJBbm?editors=1100) |
| 105 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/zYVGVXO?editors=1100)|
| 106| skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/JjQYjxd) |
 | 107 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/XWLmJmJ) |
 | 108 | 白夜 | [Codepen](https://codepen.io/Wei903/pen/ZEdbRBB) |
 | 109 | davidchi | [Codepen](https://codepen.io/DAVID-CHI/pen/rNEOQYq) |
 | 110 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/rNEOowN) |
| 111 | 馬克斯 | [Codepen](https://codepen.io/twnmax/pen/RwzaVWx) |
| 112 | LKP | [Codepen](https://codepen.io/qtghjujs-the-sasster/pen/XWLdxNX?editors=1100) |
| 113 | atien0816 | [Codepen](https://codepen.io/Ben-Atien/pen/NWZNOEQ) |
| 114 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/poXErjw) |
| 115 | Shou lun_守倫 | [Codepen](https://codepen.io/SHIHSHOULUN/pen/MWMjEaZ?editors=1100) |
| 116| rita | [Codepen](https://codepen.io/k99364/pen/WNqoZMy) |
| 117 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/LYKbXOj)|
| 118 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/rNEjzNj)|
| 119 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/MWMpmMP)|
| 120 | OZ | [Codepen](https://codepen.io/OZ_design/pen/ExBmywY) |
| 121 | 小光 | [Codepen](https://codepen.io/nwqetvuj/pen/PormbeZ) |
| 122 | Toung | [Codepen](https://codepen.io/Toung/pen/PormjOK) |
| 123 | lynee1211 | [Codepen](https://codepen.io/ntibaiss-the-solid/pen/dyBzgWm?editors=1100) |
| 124 | Judy | [Codepen](https://codepen.io/yangchi/pen/rNEGPVa)|
| 125 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/wvLmQNN)|
| 126 | Haru | [Codepen](https://codepen.io/yology/pen/ZEdVwBP) |
| 127 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/WNqmdaG)|
|127 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/zYVbmWb)|


<!-- 快速複製
| No | Discord | [Codepen] |
-->

