---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 6
## box-model
請問 .box 實際高度是多少？(請不要用瀏覽器觀察)
### 畫面呈現
**文字部分以兩行呈現為準**
### 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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）
<!-- 解答：行高 24*2行 ＋ margin-bottom 30px + image height 30px + border 上下 2px*2，所以 .box 高度應該是 112px -->
回報區
---
| Discord | CodePen / 答案 |
|:-----------------:|:------------------------------------------------------------------------------------------------------- |
| 薏慈#3795 | 112 |
| Anna Liu#3794 | 2+24+24+30+30+2=112 |
| 小鐵#2814 | 4+48+30+30=112 |
| 𝓛𝓊𝒸𝓎#8635 | 112 |
| Benson#6763 | 112 |
| SASIMI#5099 | 112 |
| Vera#5592 | 112 |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/abYOgYq) / 108px |
| ajhappy#6488 | 112px |
| 小白#2406 | 2+24x2+30+30+2=112 |
| 黃士桓#7654 | 112 px = border 2 + lh 24x2 + mb 30 + img h 30 + border 2 |
| bonnieli1414#4906 | (border: 2px)x2 + (line-height: 24px)x2 + margin-bottom: 30px + height: 30px = 112px |
| 洋蔥#5295 | 112px |
| StellaHsu#2687 | 2x2 (上下border)+24x2 (兩行行高)+30 (margin-bottom)+ 30 (img)=112px |
| YI#0863 | 2+24+24+30+30+2=112 |
| jin.huang#4666 | 上下框線(2+2)+ 字體距離下方位置(30)+ 字體行高(24+24) + 圖片高度(30px) = 112px |
| 大衛#4869 | 2x2+24x2+30+30=112 |
| yuyu#6310 | 2x2+24x2+30+30=112px |
| 我是泇吟 #5189 | 112 |
| zera#6060 |border(2+2)+line-space(24x2)+margin-bottom30+img30=112px |
| Sin#0040 | 112px = border(4px)+line--height(48px)+margin-bottom(30px)+img(30px) |
| peter.chen# | 2(border) + 24x2(line-height) + 30(margin-bottom) + 30(img) + 2(border) = 112px |
| Karol-Kuo#5287 | 112px |
| 楓之聲#6945 | 112px |
| Iris Huang#6727 | (2x2)+(24x2)+30+30=112 |
| int#7518 | 24px * 2(line hight)+30px(text margin)+30px(image height)+2px * 2(top and bottom border height) = 112px |
| ssozr#4680 | 112px |
| 群嘉#3943 | 2pxX2(border 上下) + 24pxX2(2行高) + 30px(圖片高度) = 112px |
| 威0#6919 | 2px*2 + 24px*2 + 30px + 30px = 112px |
| Clara#1275 | 2x2 (border*2)+24x2 (行高*2)+30 (margin-bottom)+ 30 (img)=112px |
| PeggyLiao#1552 | border(2)+lineHeight(24+24)+marginBottom(30)+imgHeight(30)+border(2) = 112px |
| WEI_RIO#9342 | border(2px)+lineHeight(24px+24px)(有2行)+marginBottom(30px)+Img Height(30px)+border(2px) =112px |
| 狸貓#5863 | (24×2)+30+30+(2×2)=112 |
| 威爾#1694 | 112px |
| Winnie Wu#5468 | 112px |
| Fanglin#4054 | border(2px*2) + line-height(24px*2行) + margin-bottom(30px) + img (30px) = 112px |
| 黑白兔#0684 | 112px |
| choubree#4350 | (2x2)+(24x2)+30+30=112(px) |
| 得源#8355 | 2 + 24 \*2 + 30 + 30 + 2 = 112 px |
| 鴨鴨#9822 | [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/ExEVYvV?editors=1100) / 108px |
| Yunei#6323 | 112 px |
| Fang #4680 | 112 px |
| 小諾#1866 | (line-height) 24px*2 + (margin-bottom) 30px + (height) 30px + (border 上下) 2px*2 = 112 px |
| JackC#0411 | (lh 24x2) + (mb 30) + (h 30) + (border 2x2) = 48 + 30 +30 +4 = 112px |
| mickey#8745 | (2px*2) + (24px*2) + 30px + 30px = 112px |
| Jamie Wu#9345 | [CodePen](https://codepen.io/Wu220103/pen/MWVaWoj) / 112px |
| Henry#7386 | [CodePen](https://codepen.io/h1nr9/pen/MWVaWGJ) 112px |
| 雷雷#7844 | border 2 + lh 24*2 + mb 30 + img 30 + border 2 = 112px |
| Yuna Huang #2692 | 2 + 24 *2 + 30 + 30 + 2 = 112 px |
| Amberhh#2465 | 2*2 + 24*2 + 30 + 30 = 112px |
| Daisy_Li#4231 | 2*2+ 24*2 +30 +30 = 112px |
| MiiKaa#9687 | 112 |
| WH#5607 | 112px |
| IreneY #0086 | 112px |
|Cola#1583|border2*2=4,line-height24*2=48,margin-bottom=30,img-height=30,(4+48+30+30) = 112px|
| Chi#7605 | .box border-top(2px) + .text line-height(24px * 2) + .text margin-bottom(30px) + .image height (30px) + .box border-bottom(2px) = 112px |
| Aritan#1931|112px
| Barret#1119 | 2*2+24+24+30+30 = *112* |
| leeli#6243 | 2+24+24+30+30+2 = 112 |
|曼曼#8356|2+24+24+30+30+2 = 112|
|Jason1#2538| border 2px*2(上下) +line-height 24px *2行+ image 30px + margin-bottom 30px =112px|
|Grass立花#8094|112px|
| YC#2522 | `2*2+24*2+30+30 = 112` |
| LINK#1933 | 2 + 24 x 2 + 30 + 30 + 2 = 112 px|
| LINK#1933 | (border: 2px)x2 + (line-height: 24px)x2 + margin-bottom: 30px + height: 30px = 112px|
| 逸川#6319| 112px |
| YU #0618 | 2px(.box_border)*2+24px(.text_line-height)*2+30px(.text_margin-bottom)+30px(.image_height)=112px |
suihsilan#9485 | .box實際高度： box-border(2px * 2) + text-line-height(24 * 2) + text-margin-bottom(30px) + img-height(30px) = 112px 
|
|肉桂卷#0625| border(2px+2px) + line-height&margin-bottom(24px+24px+30px) + img-height(30px) = 112px (https://codepen.io/ginnlee/pen/mdxeExo) |
|熊二#3824|112px|
|Ryan Chiang#6649| 2+24*2+30+30+2=112 ans:112px|
yu魚#1330 | 2px*2+24px*2+30px+30px=112px
| 鑫鑫#4346 | 112px |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| 咻蹦#1526 | 2x2(border)+24x2(line-height)+30(margin)+30(image)=112px |
| 艾芮絲#6060 | 112px |
| LinaChen#1796 | 24+24+30+30+2+2 = 112 |
| Yuan962#5897 | 2x2+24+24+30+30=112 |
| Pony#6778 | 2+2+24+24+30+30=112 |
| siZunyo#3185 | 82 |
| Shuo#1596 | border2px*2+line-height24px*2+margin-bottom30px+ height30px=112 |
| smallmi80#3735 | border 2px*2+ line-height 24px*2行字+mb 30px + image h30px = 2*2+24*2+30+30=112px |
| 肉魚#2149 | 2+24+24+30+30+2=112px |
| Sentiments#4883 | border = 2 * 2 = 4px, margin-bottom = 30px, lh = 24 * 2 = 48px, img height = 30px, total = 112px; |
| ROKA #4051 | 2+2+24+24+30+30=112 |
| GARBO#6659 | (24x2)+30+30+(2x2)=112 |
| QOO#8446 | height=112px(height 30+border 2x2+line-height 24x2+mb 30) |
| Emily Hsi #9066 | 112px |
| christina#6185 | box(2+2)+text(16+8+16+8+30)+image(30)=112 |
| Melon #0380 | [CodePen](https://codepen.io/BalaFang/pen/eYMpVXm) / 112px |
| Vian #7338 | 2+24+24+30+30+2 = 112 px |
| Hsiu #8767 | [CodePen](https://codepen.io/amy-hsiao-the-scripter/pen/gOeajPd) / 112px |
| kai #1098 | 2px * 2 + 24px * 2 + 30px + 30px = 112px |
| 阿蘇 #8531 | 112px |
| 鉦勝 #8333 | 112px |
| 柏PO #5617 | 112px |
| Randy #0393 | 2+24+24+30+30+2 = 112px |
| Jeff Lin #4717 | 112px |
| KJ T.#8381 | 2+24*2+30+30+2 = 112 (px) |
| hunset35#3186 | 2x2(border) + 24x2(line-height) + 30(margin-bottom) + 30(imgae) = 112 |
| Joyce#3790 | 2x24+30+30+2x2 = 112 |
| Mylène#2481 | 112px |
| Andy Hung#3335 | 2+24+24+30+30+2 = 112px |
| MinChunTsai #8285 | border(2 * 2)+ lh(24 * 2) + mb(30) + img-H(30) = 112px |
| Han Lai | .box 2 * 2 + .text 24 * 2 + 30 + .image 30 = 112px |
| Jenny真#7532 | (24*2)+30+30+2+2 = 112px |
| 44 #6963 | 112px |
| Ron Liang #7277 | border-top:2px、 lineheight:24px、lineheight:24px、margin-bottom:30px、img30px、border-bottom:2px = 112px |
| skypassion5000#4151 | [CodePen](https://codepen.io/skypassion5000/pen/QWmyEbP) /112px |
| Susie(軒)#6181 | 2*2(border) + 24*2(line-height) + 30(margin-bottom) + 30(image height) = 112 |
| hua#9099 | 112px → (lh)24x2 + (mb)30 + (img)30 + (border)2x2 |
| Carrie#2750 | 2+2+24*2+30+30=112 |
| 心幻羽#0056 | border 2* 2+ line-height 24*2+ mb 30+ img 30=112 |
| zaii#7472 | 112px => 24x2 + 30 + 30 + 2x2 |
| Jie Du #4493 | 112px |
| 紙飛機#1335 | 112px |
| CJ07 #0176 | 112px |
| Kevin#6131 | 2+24+24+30+30+2=112px |
| Jo Yun #8899 | 112px |
| Scottie#3850 | border(2)+line-height(24)+line-height(24)+mb(30)+img(30)+border(2)=112 |
| GL#2256 | .box 由上到下算起：上 border(2 px) + 兩行 line-height(24 px + 24 px) + margin-bottom(30 px) + image height(30 px) + 下 border(2 px) = 112 px |
| RuoAn#7124 | 2+2+24+24+30+30 = 112 px |
| Van.CS #2067 | border + line-height X 2 + margin-bottom + img-height + border => 2+24*2+30+30+2 = 112 |
| jeter #8014 | (24×2)+30+30+(2×2)=112 |
| Nini Chen #5790 | 112px(24+24+30+30+2+2=112) |
| 君君#3585 | 112px(2border+24line-hight+24line-hight+30mb+30img+2border=112) |
| Tuhacrt #0008 | 112px / [CodePen](https://codepen.io/Tuhacrt/pen/ExEKwoJ?editors=1100) |
| mei#8421 | 112px |
| wlc#4877 | 112px |
| Cream#3449 | 112px / [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/oNqxaBK?editors=1100) |
| 鎔瑄 #8578 | border(2px)+p(24px)+p(24px)+margin-bottom(30px)+img height(30px)+border(2px)=112px |
| Chi_Chen#3755 | 112px |
| YaWen #2752 | 2 x 2 *(box 上下 border)* + 24 x 2 *(text line-height 2行)* + 30 *(text margin-bottom)* + 30 *(image height)* = 112px |
| Gui#9571 | 112px / [CodePen](https://codepen.io/guitimliu/pen/MWVeBeZ) |
| Halla #0431 | 112px / [CodePen](https://codepen.io/wawykddh-the-typescripter/pen/jOzrpoo) |
| Kiwi#9804 | 112px ( 2x2px + 2x24px + 30px + 30px ) |
| bakiii | [codepen ](https://codepen.io/aki168/pen/JjLKQWo) |
| JarDar #6980 | 2+24x2+30+30+2=112 px |
| Manson許 #2295 | 4+24x2+30+30=112 px |
| yuchenye #6119 | 2x2+24x2+30+30=112px |
| kancheng #3915 | 2*2(border: 2px)+24*2(line-height: 24px;)+30(margin-bottom: 30px;)+30(height: 30px;) = 112px [codepen ](https://codepen.io/kancheng/pen/mdxOdam) |
| Clara Cai#7097 | border 2 × 2 + lh 24 × 2 + mb 30 + img-h 30 = 112px |
| iamYanYan#9422 | line-height: 24px; X2 + border: 2px X2 + margin-bottom: 30px + image height:30px = 48px+4px+30px+30px = 112px |
| Tori#1248 | 48+30+4+30 = 112px |
| Nathan James#8120 | 2+24+24+30+30+2 = 112px |
| sophiee#7015 | 2＋2＋24＋24＋30＋30 ＝112px |
| 瑞瑞#4605 | 上下邊框(2*2px)+文字(12*2px)+margin-bottom(30px)+照片高度(30px)= 4+48+30+30 = 112 px |
| Deborah#0033 | 上下線條共4px+2行文字行高共48px+文字區塊外推30px+圖片高30px=112px |
| EmilyLin#0526 | 112px |
| WEI#0797 | 112px |
| yuling#1634 | 2*2+24+24+30+30=112px |
| KarenChan#4625 | 112px |
| rueee#7997 | 2+24+24+30+30+2=112px |
| 鄭小蛙#3528 | (上下框線4px)+(兩行文字高度48px)+(圖片高度30px)=112px |
| Jumpye#8601 | 2+2+24+24+30=112px |
| Rena#6249 | (border 2px *2)+(line-height 行高 24px *2)+ image height 30px + margin bottom 30px =112px |
| KT Hsieh#2861 | 2px*2 (上下border) + 24*2 (兩行段落) + 30px (下間距) + 30px (圖片高度) = 112px｜ |
| 丁丁#0922 | 112px |
|DoraHunag#8223| 2+24+24+30+30+2=112px|
Sign in with Wallet
Connect another wallet