---
# System prepended metadata

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

---

請問 .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 / 答案      |
|:--:|:-----------------:|:----------------------------------------------------:|
|:-:|:博派變形金剛#0959-------:|:https://codepen.io/chan-chen/pen/abQVKNr------------------ |
| 01 |hebin.|[Codepen](https://codepen.io/landyhsiao776/pen/GRwEoWm)|
| 02 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/NWEgxpY) |
| 03 | Morning#7336 | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/ExOXPmq?editors=1100) |
| 04 |billy_ti|[Codepen](https://codepen.io/Ti-Show/pen/PoxjZmK)|
| 05 |Ann Chou#0146|[Codepen](https://codepen.io/annchou_illu/pen/GRwEoEm)|
| 06 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/zYMzrdg) |
| 07 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/eYQRJWX) |
| 08 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/rNQwxwg) / 112px |
|09|Moreene#6720|[CodePen](https://codepen.io/Moreene/pen/eYQRJea)|
| 10 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/zYMzrpO) |
|11|薯餅|[Codepen](https://codepen.io/ColdingPoTaTo/pen/wvQeMpm)|
| 12 | Kulimusoda | [Codepen](https://codepen.io/yuch3n_chen/pen/ExOXPbY) |
| 13 | awei_0625 | [Codepen](https://codepen.io/hong-wei/pen/LYXLGeN) |
| 14 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/mdQwVLM) |
| 15 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/zYMzrjY) |
| 16 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/WNYOryg) |
| 17 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/mdQwVKM) |
| 18 | SmallP | [Codepen](https://codepen.io/smallp/pen/KKrqVQr) |
| 19 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/LYXLGmZ) |
| 20 | zhu.lin | [CodePen](https://codepen.io/codepenplayer/pen/oNQwbMz) |
| 21 | DoDo_6666 | [Codepen](https://codepen.io/MissDouble/pen/gOQRPBo) |
| 22 | m_m | [Codepen](https://codepen.io/minnn7716/pen/NWEgxLL) |
| 23 | .icesam | [Codepen](https://codepen.io/icesam/pen/yLQXeGW) |
| 24 | icy.moo | [Codepen](https://codepen.io/len5464/pen/WNYOraa?editors=1100) |
| 25 | townyuan | [Codepen](https://codepen.io/townyuan/pen/VwVWeqb) |
| 26 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/poQwgXm) |
| 27 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/abQwdeZ) |
| 28 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/Rwqgrzj?editors=1100) |
| 29 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/YzRQwdQ) |
| 30 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/BaGZKBO) |
| 31 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/wvQeMRx) |
| 32 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/gOQRrpK) |
| 33 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/JjeJXKW) |
| 34 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/xxQrVOg)|
| 35 | CMLB0212| [Codepen](https://codepen.io/Chungmin0212/pen/dyQRGwv)|
| 36 | EmptyWu| [Codepen](https://codepen.io/emptywu/pen/ZEmyWeQ)|
| 37 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/QWJgNge) |
| 38 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/ZEmyWXW) |
| 39 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/eYQRZWZ) |
| 40 | yun#5213 | [Codepen](https://codepen.io/yun-the-scripter/pen/MWzoyry) |
| 41 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/vYQZGjz) |
| 42 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/gOQRrKq) |
| 43 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/QWJgNZb) |
| 44 | 末次 | [Codepen](https://codepen.io/yunjulee/pen/YzRQqRO) |
| 45 | 路人ADCB#9851 | [Codepen](https://codepen.io/markyourpage/pen/YzRQqBJ) |
| 46 | PH#2731 | [Codepen](https://codepen.io/landyhsiao776/pen/GRwEoWm) |
| 47 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/vYQZGMv?editors=1100) |
| 48 | Uli | [Codepen](https://codepen.io/uli1313/pen/NWEgrWG) |
| 49 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/rNQwLeY?editors=1100) |
|50|阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/ZEmyOWJ)|
|51|dong2328|[Codepen](https://codepen.io/htamlkdz-the-encoder/pen/jOQwrpL)|
|52|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/OJagXaR)
| 53 | DoryH#0526 | [Codepen](https://codepen.io/dorihung/pen/YzRQWdz) |
| 54 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/wvQeWYg) |
| 55 | robbie_0830 | [Codepen](https://codepen.io/ShuZhen/pen/bGQRwGr?editors=1100) |
| 56| MKL | [Codepen](https://codepen.io/Code-My/pen/LYXLZBv?editors=1100) |
| 57 | Ning#5213 | [Codepen](https://codepen.io/ninghsu/pen/poQwELq) |
| 58 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/poQwEKG) |
| 59 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/oNQwzdL) |
| 60 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/YzRQGmx?editors=1100) |
| 61 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/XWygNdd) |
| 62 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/vYQZyXd) |
| 63 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/OJagbjr) |
| 64 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/wvQeWxo) |
| 65 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/jOQwVXb) |
| 66 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/ExOXNrw) / 112px |
| 67 | AAAAA | [Codepen](https://codepen.io/yvgxsirf-the-typescripter/pen/jOQwyrV) |
| 68 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/GRwENjG) |
| 69 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/XWygMNQ) |
| 69 | cura | [Codepen](https://codepen.io/curalin/pen/mdQwWaB) |
| 70 | Eden.C |[Codepen](https://codepen.io/iseden/pen/KKrqWjY) |
| 71 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/GRwEmKQ)|
| 72 | KevinHuang#0957 | [Codepen](https://codepen.io/qw-huang/pen/jOQwmMj?editors=1100) |
| 73 | yunhsinnnnnnn| [Codepen](https://codepen.io/yun___hsin/pen/MWzomrK) |
| 74 | ztion | [codepen](https://codepen.io/ztion/pen/WNYOjOq?editors=1100)|
| 75 | 阿賀#3700 | [codepen](https://codepen.io/sungho/pen/qBQjmJp)|
| 76 | hsuhsusophie#7338|[codepen](https://codepen.io/hsuhsusophie/pen/BaGZRXB)
| 77 | Brian#7046 | [Codepen](https://codepen.io/PochienTsai/pen/BaGZZQN) |
| 78 |MarvinWu#8362 | [Codepen](https://codepen.io/chi-Wu/pen/oNQwwzQ) |
| 79 |Robert.H | [Codepen](https://codepen.io/Robert1205/pen/wvQeqKe) 
| 80 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/XWygJrO) |
| 81 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/QWJgMVZ) |
| 82 | Matic#3173 | [Codepen](https://codepen.io/Matic1124/pen/NWEgveL) |
| 83 | wind | [Codepen](https://codepen.io/wind7y/pen/YzRQxBV) |
| 84 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/MWzoJpv) |
| 85 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/KKrqXgO) |
| 86 | 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/gOQRGLj) |
| 87 | Celine#6773 | [Codepen](https://codepen.io/celinephoebe/pen/dyQRVvZ) |
| 88 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/oNQwGwG) |
| 89 | zona_0.0 | 112px |
| 90 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/VwVWMMQ) |
| 91 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/WNYOZMV) / 112px |
| 92 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/QWJgqPb?editors=1100)|
| 93 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/bGQRYdd)|
| 94 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/rNQwYwp?editors=1100)|
| 95 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/BaGZmVz)|
| 96 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/VwVWrow) |
| 97 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/VwVWQWy) |
| 98 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/vYQZrLW) |
| 99 | Janshawn | 112px |
| 100 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/ExOXRNy) |
| 101 | jhouhank | [Codepen](https://codepen.io/JhouHank/pen/qBQjKjj) |
| 102 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/VwVWdQQ) |
| 103 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/mdQwKaQ) |
| 104 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/QWJdyER) / 112px |
| 105 | 阿沁#8176 | [Codepen](https://codepen.io/a8322342/pen/eYQRjVy) / 112px |
| 106 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/VwVWGYY?editors=1100) |
| 107 | 慈玲#8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/GRwEXMW) |
| 108 | Azi Hsieh#2861 | [Codepen](https://codepen.io/AziHsieh/pen/wvQeEOj) |
| 109 | Qi-Hua#1993 | [Codepen](https://codepen.io/emily40830/pen/NWEgOdo)
| 110 | ga771058 | [Codepen](https://codepen.io/ppzigmtg-the-typescripter/pen/YzRQRgK) |
| 111 | Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/PoxjLmY) |
| 112 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/YzRQMyX) |
| 113 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/VwVWNLw) |
| 114 | 阿富#0389| [Codepen](https://codepen.io/spring40747/pen/vYQZMry)|
| 115 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/JjeJVwY) |
| 116 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/OJagGqQ) |
| 117 | Eason#7884 | [Codepen](https://codepen.io/ASLEO/pen/gOQRJae) |
| 118 | ct3741 | [Codepen](https://codepen.io/claire-T/pen/jOQwjgG) |
 118 | dana | [Codepen](https://codepen.io/da-lin/pen/GRwEVev)
 119 | JohnC#3814 | [Codepen](https://codepen.io/johnhua25147050/pen/zYMzgbO) |
| 120 | runweiting | [Codepen](https://codepen.io/weiting14/full/BaGZXVm) |
| 121 | ruchi7866 | [Codepen](https://codepen.io/jason2267/pen/WNYENaR) |
| 122 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/GRwvpeJ?editors=1100) |
| 123 | shcopy | [Codepen](https://codepen.io/shcopy/pen/KKrvzyO) |
| 124 |KC_8685|[Codepen](https://codepen.io/cathy7411/pen/jOQLqxg)|
| 125 |SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/QWJMEgN)|
| 126 |Chung#5786|[Codepen](https://codepen.io/fotdclxz-the-encoder/pen/eYQEzWR) / 112px|
| 127 |elma.yo|[Codepen](https://codepen.io/ElmaYu/pen/dyQzXxB) / 88px|
| 128 |celia#9182|[Codepen](https://codepen.io/celia01/pen/MWzvJdr) |
| 129 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/ZEmJKjb?editors=1100) |
| 130 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/VwVzWxg) |
| 130 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/wvQqPpa) |
| 131 | peggy#3169 | [Codepen](https://codepen.io/peggylai/pen/abQyjyE?editors=1100) |
| 132 | Mylène |[CodePen](https://codepen.io/hamajibashi/pen/XWyaBBV)|
| 133 | stevnchang421 |[CodePen](https://codepen.io/vwtrpqmm/pen/vYQJzaK)|
| 134 | Johnson3669 |[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/ZEmJOeK)|
| 135 | Long |[CodePen](https://codepen.io/Loonng/pen/XWyaOGK)|
| 136 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/mdQMgqP)，112px |
| 137 | lishuan | [Codepen](https://codepen.io/lishuan/pen/xxQLoVX)|
| 138 | csh97 | [Codepen](https://codepen.io/pyrbkvev-the-animator/pen/poQWzKX)|
| 139 | Nicktsai#0706 | [Codepen](https://codepen.io/brownie-nick/pen/OJaxJZL)/112px|
| 140 | Lesly#1279 | [Codepen](https://codepen.io/LeslyChang/pen/eYQGmvK) |
| 141 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/OJaxVMz) |
| 142 | bbbear#7545 | 112px |
| 143 | Kimi #9564 |112px／ [Codepen](https://codepen.io/kimihu91/pen/gOQgjEX)|
| 144 | soniawu |112px／ [Codepen](https://codepen.io/YUJOU/pen/jOQGLpY?editors=1100)|
| 145 | 0naomi0 | [Codepen](https://codepen.io/0Naomi0/pen/oNQGPoR) 112px|
| 146 | albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/zYMEeYX) 112px|
| 147 | min-L | [Codepen](https://codepen.io/min-sky-lin/pen/JjeOPqb)|
| 148 | rjjq | [Codepen](https://codepen.io/rjjq/pen/JjeOoOw) |
| 149 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/mdQqVaV) |
| 150 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/JjeOJXE) |
| 151 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/rNQYzVz) |
| 152 | .elliehsu | [Codepen](https://codepen.io/ellieyuhsu0827/pen/RwqjZeN) |
| 153 | littlewhite2406 | [Codepen](https://codepen.io/gracewhite/pen/RwqjQWa?editors=1100) |
| 154 | +7 | [Codepen](https://codepen.io/tojibom/pen/MWzrKKb) |
| 155 | EY | [2+2+24*2+30+30=112](#) |
| 156 | awei#0720 | [Codepen](https://codepen.io/Aweishi/pen/rNQpYzV) |
| 157 | WA | [Codepen](https://codepen.io/ldddl/pen/NWEXyqp) |
| 158 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/XWyVZbB) |
| 159 | lin_lion | [Codepen](https://codepen.io/Lion-Lin/pen/yLQpQvm) |
| 160 | stoos_1369 | [Codepen](https://codepen.io/Stooss/pen/zYMRBqO)|
| 161 | 郭芙蘭＃6374 | [Codepen](https://codepen.io/flora_Kuo/pen/qBQxrdX)|
| 162 | 郭芙蘭＃6374 | [Codepen](https://codepen.io/itsjessiechen/pen/rNQwxwg)|
| 163 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/YzReabE)|
| 164 | hironaka | [Codepen](https://codepen.io/Hironaka0815/pen/PoxRaaP) |
| 165 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/abQYxRw) |
| 166 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/rNQvoJV) |
| 167 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/yLQjQEq) |
| 168 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/mdQKdme) |
| 169 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/mdQKajq) |
| 170 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/oNQmLPw) |
| 171 | chen_emily | [Codepen](https://codepen.io/HUIJINEmily/pen/XWyLByB) |
| 172 | Mia小福#4473 | [Codepen](https://codepen.io/a0950271/pen/eYbyYKV) |
| 173 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/poYoKEw) |
<!-- 
- 快速複製格式：

| 0 | user | [Codepen]() |
-->
