---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/5(一) 每日任務
## 問題

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

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


### 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="">
</div>     

### CSS

.text{
  font-size: 16px;
  line-height: 24px; 
  margin-bottom: 30px
}
.image{
  height: 30px;
}

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答：行高24*2行＋margin-bottom 30px +image height 30px+ image 本身會多出2~3px，所以 .box 高度應該是110~111之間 -->

回報區
---

<!-- 0. Bingbingboom（回報範例，請使用註解回報）
答案：（可直接撰寫答案）
Codepen：https://codepen.io/Bingbingboom/pen/jOBZVWq
-->

<!-- 1. 焦糖
答案: 110px
Codepen:

-->
<!-- 2.孫
答案 108px

dox高度＝(line-height*2)+margin-bottom+image的height
＝108px -->

<!-- 3.周周
.box高度為24+24+30+30正負2~3=110px~111px
Codepen:https://codepen.io/jhoujhou-the-decoder/pen/zYwGMyg -->

<!-- 4.沈依蓉
答案 111px

行高24*2+margin-bottom30px+image height30px+image多餘部份概抓3px
= 111px
-->

<!-- 5.Froel
答案 110~111px

box高
= p 段落高度 * 2 + p 段落 margin-bottom + image 高度 + image 神秘的 margin-bottom
= 24 * 2 + 30 + 30 + 2(or 3)
= 110~111

CodePen:https://codepen.io/Froel/pen/RwVPOBy
-->

<!-- 6.koly
anser: box＝１０8. 24*2+30+30+2~3
codepen:https://codepen.io/pwbzvqja/pen/VwbLOeG
-->

<!-- 7. Irene Wang
答案: 110px
CodePen: https://codepen.io/lohas1107/pen/ExmVVLz
-->

<!--8.rose
行高24*2+margin-bottom 30+ image 30高度+詭異2-3
答案:108-111 之間
CodePen: https://codepen.io/roseling30/pen/xxdwEZw
-->

<!-- 9.Cheng Pei-hsuan
答案 108~111px

(行高24*2+margin-bottom30px)+image height30px+image多餘部份1~3px
= 108~111px
-->

<!-- 10.黃羽均
答案 110-111
行高24*2=48
text的margin-bottom:30
圖片高度30+2-3=32 or33
48+30+32=110
-->

<!-- 11.Rita
答案 110-111
text=24+24+30=78，image=30+2~3=32or33，box=78+32or33=110or111
-->

<!-- 12.mansonivan

.text
line-height 24px + 24px +
margin-bottom: 30px = 108px

.image(1px-3px) + 108px = 答案 108px-111px
-->

<!-- 13. Scarlett

答案：110-111px
.box理論上高度是108
lh24*2+mb30+img30=108
但因為img有不明高度2-3px
所以按照原程式碼，答案是110-111px
如果給img加上display:block就會是108px了
-->

<!-- 14.Sylvia-H

24*2+30+30=108px
再加上 img 底下不明高度 2~3 px
.box 約為110~111px

-->
<!-- 15.陳sam
24*2+30+30=108px，加上img底下高度約2~3px，box大約110px~110px
-->

<!-- 16. Phoebe
box高度:p段落高度*2 + p段落margin-bottom + image高度 + image 多出一點點的margin-bottom

24*2+30+30+2(or3) = 110~111px
-->

<!-- 17: Vic
24*2(文字兩行)+30(mb)+30(imgh)+2(img預設) = 110px
-->

<!-- 18:Lina Chen
.box 高度 = 24*2(兩行 p 段落文字) + 30px(p 往下推的 margin-bottom) + 30px(image 高度) + 2px(image 預設高度) = 110px
-->
<!-- 19:小玥
.box高度=24px(p行高)+24px(p行高)+30px(img高度)+30px(p margin-bottom)+(baseline:2~3px)=110~111px

<!-- 20:Jemma
行距 2(行) x 24px 加上 text 的 margin-bottom 30px 再加上圖片高度 30px 和多出的一點點 大約會落在 110 左右
-->

<!-- 21：蔡明達
行距產生高度 > 24*2=48+30=78+30=108px，圖片本身會多出 2-3px，所以正確答案應該是 110-111px
-->

<!-- 22：黃小瑄
box高度為110~111px之間 (24*2)+30+30+圖片底部多出2~3
-->

<!-- 23：方文文
文字部分的高度:24*2px
文字下方的margin:30ox
圖片被設定的高度:30px
圖片下方預設會留的間隙:2-3px
==>因此box最後的高度會落在108-111px之間
-->

<!-- 24：kane0927
24+24+30+30=108
又因為圖片會有不知名2~3px留白
所以.box約為110~111px
解決方式可下display:box 或 vertical-align:middle

<!-- 25. Sz
2*24+30+30+2~3=111左右
p的行距看line-height 2*24
加上margin bottom 30
img 30，inline屬性
需再加2~3px，回答為111px左右
-->

<!-- 26： 叻叻豬, 文字行高24*2＋margin-bottom 30px + image height 30px + image 本身會多出2~3px，所以 .box 高度應該是108~110 -->

<!-- 27： YEN 24+24+30+30+(2~3) 大概為111-112 -->
<!-- 28 : Xing 108-111 之間 -->
<!-- 29 : 陳品宏
答案: <p> = 兩行字48px + margin-bottom30px = 78px
<img> = 30px + 圖片上方、下方4px = 34px
box = 78px + 34px = 112px
-->
<!-- 27： 群嘉 16x1.5x2+30+30+(2~3)=111-112 px -->

<!-- 28. 雷古娜
box高度=(行高24px*2)+段落外推30px+圖片高度30px+圖片下方討厭的空間2~3px
=48+30+30+2~3
=110~111

-->
<!-- 29. Joanna
box高度=(行高24px*2)+段落30px+圖片高度30px
=108+圖片下方空間1~2px
＝110~111

<!--
30. jen
(24*2)+30+30=108
108+img下方2~3px = 110~111px
-->

<!--
31. Kin Hei Shing
兩行text：24*2＝48px
text的margin-bottom＝30px
圖片高度＝30px
圖片下方空間＝2px

box的高度＝110px
-->

<!--
32. Joy Cheng
box高度=p+img=(24*2+30)+(30+1~3)=109~111px 左右
-->

<!-- 33. Winnie
答案：24*2+30+30+2~3=110~111px之間
-->

<!-- 34. Eason
答案：(行高24*2)+30+30+2(圖片預設高度)= 110px
-->

<!-- 35. ZY Hsu
(24*2)+30+30+(2~3)=110~111px -->

<!-- 36. 格可
文字:24*2+30=78px
圖片:30+2~3px空隙=32~33px
總共是:110~111px(答案)-->

<!-- 37. roger
答案是110px-111px，
文字有兩行line-height:24px*2+margin-bottom:30px +圖片本身30px再加多2-3px
-->

<!-- 38.阿瓜
答案：110~111px

.box高度：24*2+30+30=108
108+(2~3圖片下的小空間)=110~111

多出的小空間因 img 預設是 inline- block 元素，
而 vertical-align 屬性預設值是 baseline，
baseline 的設定會讓文字和其父元素的基（準）線對齊，這條基線會和最下方有些空間，img 圖片也會在這基線上，因此也會留有基線下的小空間.
-->

<!-- 39. Jun Chan
答案：110~111px
24*2(p兩段行高)+30(下推留白)+30(圖片高度)+2~3(圖片下方空隙)
https://codepen.io/chujunchan/pen/abWdozJ
-->

<!-- 40. LiShang
答案：110~111px
24*2(p兩段行高)+30(margin-bottom)+30(圖片高度)+2~3(圖片下方預設留白)
-->

<!-- 41. Ning
答案：110~111px
24px*2+30px+30px+(2~3px) =110~111px
-->

<!-- 42. hellocrab
When I use CSS reset, the answer will be 108px;
but if I follow the default browser style, the answer will be 110px or 111px (because of the hidden bottom margin of picture)
-->

<!-- 43. 童筱涵
答案：110~111px
24px*2（line-height)+30px（margin-bottom）+30px（圖片高度）+(2~3px) =110~111px
-->

<!-- 44. Coco
答案：
24px(p line-height)*2+30px(p margin-bottom)+30px(img height)+(2~3px)
=110~111px
-->

<!-- 45. Tansy
Answer: 110px ~111px

line-height = 24px
2 lines so it will be 24px*2 = 48px
48px + 30px (margin-bottom) = 78px
78px + 30px (image height) =108px
note: due to baseline setting, need to consider hidden margin-bottom of image which is ususally between 2~3px....
===> 108px + ~2~3px (image border) = 110px - 111px
codepan:https://codepen.io/subarashii-huch09/pen/OJmyBWG?editors=1100

-->

<!-- 46.魚魚
答案： 110~111px

line-height (24px*2) + margin-bottom 30px + image height 30px + image大概多抓2-3px
= 110~111px
-->

<!-- 47.Irene Wang
答案：111px
Codepen: https://codepen.io/irene-wang-the-looper/pen/zYwrOep
-->

<!-- 48.肉鬆
答案： 110~110px
.text: line-height: 24px; *2 => 48px
.text: margin-bottom: 30px => 30px
.image: height: 30px; => 30px
照片本身有2~3px => 2~3px
48px+30px+30px+2~3px = 110~111px
Codepen: https://codepen.io/klrkicog/pen/GRmoRoR
-->

<!-- 49.Cate Chang
答案：理論上 108px，實際上 110 ~ 111px
因為文字部分以兩行呈現為準
所以 24px(行高)*2(行) + 30px(text 的 margin-bottom) + 30px(圖片高度) = 108 px
但因為圖片預設是 inline 元素
這特性導致圖片下方會多出 2 ~ 3px 的高度
如果 img 改成 display: block 則恢復正常高度 108px
-->

<!-- 50.Jean
答案：box的高度為110~111px
P段落：line-height: 24px
P段落：line-height: 24px
P段落：margin-bottom: 30px
img：height: 30px
img下方會有2~3px

24+24+30+30+2~3=110 ~ 111px
-->

<!-- 51.Gill
答案：24+24+30+30+(img下方有2~3px)=110~111px
-->
<!--icy 答案
p(24*2)+margin-bottom(30)+img高度 30+(2至3px)= 110~111 高度-->

<!-- 52.sarah
Codepen：
https://codepen.io/sarah-wang/pen/vYmLYRO?editors=1100
-->
<!-- 53.Paisley Chien
(24*2)+30+30+(2~3 img水份)=110~111px
-->

<!-- 54.Eric-小偉哥
Codepen：
https://codepen.io/ericLoveDesign/pen/jOmWOza

// 我的估算:
// 1. p 兩行文字段落，line-height *2 = 24*2 = 48px
// 2. margin-bottom: 30px
//. 3. image: height 30px
//. 4. image上下預留2px = 2*2 = 4px

// ===> 加總: 48+30+30+4= 112px
-->

<!-- 55.aSong

line-height: 24px;
margin-bottom: 30px;
height: 30px;
img 下方預留寬度： 2px~3px

Answer: ( (24px)*2 + 30px + (30px +2px || +3px) ) = 110px || 111px
-->

<!-- 56.Riley

line-hight:24px
margin-bottom:30px
img height:30px

全部加總 ( 24*2 ) + 30 + 30 = 108
預留img底部的空間為 2~3px
box答案為 110~111px
-->

<!-- 57.yijun
2行文字行高 24*2px + mb 30px + 圖片 30px +圖片小空間 2~3px = 110~111px
.box 高度為110~111px
-->

<!-- 58. SihLe Huang
24 * 2 + 30 + 30 = 108 (px)

Ans: 110~111px（比計算的高度多 2~3px，
因為圖片本身的 bug）
-->

<!-- 59. natsu
行高24*2+mb 30 +圖高 30 +圖片限定微妙小間距2~3 =所以.box總高會是110~111之間
-->

<!--60. Peggy Tsai
.box的高度是 line-height 24px*2行 + margin-bottom 30px + image height 30px +圖片預設會多的2~3px =
110~111px之間
-->

<!-- 61. Nate Lu
Codepen: https://codepen.io/nate12/pen/MWmKYdW

Answer: lh24px*2 + mb30px + img30px + img inline 小尾巴 2~3px = 110~111px
-->

<!-- 62. Carol LEE
.box高度為 lh24*2行 + mb30px + img height 30px +預設img多2~3px = 110~111px
-->

<!-- 63. Tina
答案：110~111px
文字行高24px*2行=48px + margin-bottom 30px +圖片行高30px + 圖片底部預設2-3 px = 110-111px
-->

<!-- Sans-ge
answer: p段落高度24px*2+margin-bottom: 30px +.image height: 30px +圖片本身可能的px2~3
計 = 108~111px
code pen :https://codepen.io/Sans-ge/pen/eYWJNVv -->

<!-- 64.Shani
Codepen:https://codepen.io/ShaniMa/pen/WNjrQvG
ANS:110~111px-->

<!-- 65. Ariel
答案：110~111px

兩行行高 + P段落向下推開 + image高度 + img元素額外縫隙
24*2+30+30+(2~3) = 110~111px

-->

<!-- 66. Zoe
答案：110~111px

.text兩行line-height + p段落margin-bottom + image高度 + img元素下方縫隙
=(24px*2)+30px+30px+(2~3px)
Ans: 110~111px

-->
<!-- 67. Fleur
答案：110~111px

行高24px*2行 + margin-bottom 30px + img高度30px +圖片下方預留2~3px =110~111px
答案:110~111px
-->
<!-- 68. 楊凱傑
答案：line-height24px*2行 + margin-bottom 30px + imgheight30px +img預設的2~3px =110~111px
-->
<!-- 69. 得源
答案：line-height 24px * 2行 + margin-bottom 30px + image height 30px + img 預設有 2~3px = 110px - 110px-->

<!-- 70. Yao Lin
Codepen:https://codepen.io/yaoyaoiii/pen/NWjxWXj

<!--71. WilsonHan
答案：margin-bottom: 30px +
2行的line-height: (24px*2) +
圖片的高度 30px +
圖片預設的 2~3px

約等於 110px ~ 111px-->
<!-- 72. 粘勝凱
codepen:https://codepen.io/szykttdy/pen/ExmPPjq?editors=1100
答案:24*2(兩行)+30(margin-bottom)+30+(2~3)
=110~111
-->

<!-- 73.Meng
text=24*2+30=78 img=32 or 33
box的高度=110px或111px
-->

<!-- 74.Ruby Chiang
text部分:24*2+30=78 img部分:30+3=33 (3px為概抓image多餘margin-bottom)
box的高度=78+33=111px
-->

<!-- 75. Luke Yan
文字部分以兩行呈現為準
text line-height: 24px * 2行 = 48px
text margin-bottom: 30px
image height: 30px
image margin-bottom: 3px
合計 48 + 30 + 30 + 3 = 111px
-->

<!-- 76. PHIL
line-hight:24*2=48px ;
margine-bottom:30px;
img:30px+2~3px(圖片預留空間) ;
共110~111px;
-->

<!-- 77. Summer.H
24(line-height)*2+30(margin-bottom)+30(img)+2px~3px圖片預留空間，Ans:110px-111px
-->

<!-- 78. 阿熊
文字以兩行計算: line-height:24px*2=48
margin-bottom:30px
img:30px
img_margin-bottom:2~3px
box=48+30+30+(2~3)=110~111px
-->

<!-- 79.Alvin Chu
codepen:https://codepen.io/wave99487chu/pen/MWmKyeK
-->

<!-- 80. YuriT
Answer: 110-111px; lh:48px + mb:30px + img:32-33px
CodePen: https://codepen.io/wenfisht/pen/XWRbvgm -->

<!-- 81. Hi Annie
24*2(line-hight) +30(margin-bottom)+30(img)+2~3(img空白)=110~111px -->

<!-- 82.Jamie
24+24+30+30+2~3=110~111px
-->

<!-- 83.Winnie
24x2+30+30+2~3=110~111px
-->

<!-- 84.Jim Hwang
24px*2+30px+30px+(img產生的2~3px)=110~111px
-->

<!-- 85.Jameskrauser
24*2（two row ） + 30(margin-bottom) + 30(img) + 2(just from brower) = 110

-->

<!-- 86. Gui Ting Liu
p.text 行高 24 * 2 行 + margin-bottom 有 30px = 78
img 設定 30px 但在沒有設定為 block 的情況之下底部會再多 2~3px
因此答案為 = 78px + 30px + (2~3px) = 110px~111px
-->

<!-- 87. Jerry Yen
24x2+30=78
78加上img 30px=108px
108px+圖片本身底下的 2~3px = 110~111px
-->

<!-- 88. anna
https://codepen.io/annhys/pen/zYwrKrV
-->

<!-- 8９. Kaka
110~111px
24*2 + 30 + 30 + (圖片下方 2~3px) = 110~111px
-->

<!-- 90.Una(點子數位)
答案 108~111px 之間
24+24+30+30+img2~3px=108~111px
---!>

<!-- 91. Pocky
110~111px
答案：
文字: (24*2行)+30=78px　　圖片高度30px，高度會比原本再多2~3px
總和為：78+30=110~111px
-->

<!-- 92. shanglin
line-height因為文字有兩行,所以*2為48px
另外還要再加上mb30px
圖片高度為30px但實際上會再多出2~3px故計32px
所以是48px + 30px + 32px = 110px
-->

<!-- 93. 黃士桓
https://codepen.io/shr-huan-huang/pen/poPgEKB
lh24+lh24+mb30+img(h30+mb2~3) = 108~111
-->

<!-- 94 . 阿和
line-height為24 文字兩行 24*2+30(margin-bottom)+30~33(圖片高度與多出的2~3px) 故等於 108~111
-->

<!-- 95. 健清 JC
答案：24*2+30+30+2~3=110~111
-->

<!-- 96. Erin Huang
答案：https://codepen.io/ErinHuang/pen/WNjrGVW
line-height*2+margin-bottom+image height+誤差2px
-->

<!-- 97. jimmyFang
答案： ( (line-height為 24px) * 2 ) + (margin-bottom 30px) + (image 30px) + 圖片高度多出的2~3px = 110~111px
-->

<!-- 98. stepha
答案:
https://codepen.io/w1112yb/pen/QWvyKzo
(line-height 24*2)+(margin-bottom 30)+(圖片高30)+(圖片誤差 2~3)= 48+30+30+2~3px = 110~111px
-->

<!--99. Jocelyn
答案:24*2+30+30=48+30+30+(2~3px圖片誤差)=110~111px
-->

<!--100. Tracy曼娟
答案:110px~111px
-->

<!--101. huanan
答案:24*2 + 30 + 30 + 圖片大概3px的誤差 約111px
-->

<!-- 102. Carol Li
答案：
(文字行高*2) + 文字margin-bottom + 照片高度
(24*2) + 30 + 30 = 108
但是 img 還會增加 2-3px的margin-bottom
所以是大約 110-111px
codepen:https://codepen.io/carolli834/pen/ZEKQBBW
-->

<!-- 103. Katie Zhao
答案：
.box =lh 24px*2 + mb 30px + image height30px + image不明高度 2 or 3 px
= 110px~111px
-->

<!--104. 曹馨云
答案:24+24+30+30+2~3(image) = 110~111
-->

<!-- 105. Blake Hung
答案: 24*2 + 30 + 30 = 108
108 + (2~3px) =. 110 ~ 111px

codepen: https://codepen.io/Blakehong/pen/vYmLggo
-->

<!--106. 吐司(超人)
答案:24*2(lh)+30(mb)+30(imgh)+2~3(image) = 110~111
-->
[Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A)

<!--107. Zooey Cheng
答案: 24(line-heighy)*2(line)+30(margin-bottom)+30(img height)=108
108+2~3(img下神秘小gap)=110~111
-->

<!-- 108: Sec
答案: 2行文字line height(24 * 2) = 48, 文字margin-bottom 30px, 图片高度30px但是会多出 2 - 3px
48 + 30 + (30 - 33) = 108 - 111
-->

<!-- 109: Stephanie Kan
答案: 文字line height24*2=48,margin-bottom 30px,圖片高度30px但沒有將img屬性變成block,會有2~3px的謎之margin-bottom
48 + 30 + 30 + (2or3) = 110 or 111
-->

<!-- 110: Alberto
答案：文字行高 24px*2 + margin-bottom 30px + 圖片高度 30px + 圖片預設（？）下方的 3px = 111 px

<!-- 111: Elaine Liu
答案：110。
文字兩行 line-height:24px*2=48 + margin-bottom:30px + 圖片 height:30px + 圖片預設下方留白 2px

<!-- 112. ellie
答案：110~111px

<!-- 113.Zora
答案：110px
文字行高24px*2=48 + margin下推30px + 圖片高30px + 圖片預設下方留白 2px

<!-- 114.axlrock1021
(24 * 2) + 30 + 30 = 108
img 本身會多出 2-3px，所以高度大約 108 - 111 之間
答案：110 ~ 111px
codepen: https://codepen.io/lnjbmmxo/pen/vYmxydE
-->

<!-- 115.YOYO
text行高24px*2+mb30px+圖片高度30px +圖片預設留白2px~3px
答案: 110px or 111px
-->

<!-- 116.lumei
(24*2)+30+30=108
108+2~3(圖片下方會多出2-3px)=110~111px
-->

<!-- 117.Archie
文字行高24*2=48+margin-bottom30+height30=108
108+圖片下方會多出2-3px=110~111px
-->

<!-- 118. Dida
(24*2) + 30 + 30 + 3 = 111px
文字高度 mb 圖片 神秘空白

-->

<!-- Joe Kuo
Codepen: https://codepen.io/alertislow/pen/BaRjxjd
24*2(line-height)+30(margin-bottom)+30(image.height)+ 2(div的上下間隔?) = 110px

-->

<!--120. AKI
答案:24*2(行高)+30(text底部外邊距)+30(圖片高度)+2or3(圖片多出邊距) = 110~111 px
-->
<!-- 121 will-->
<!-- 答案：(24*2)+30+(32~33)=110~101px -->
<!-- ---- -->

<!--122 Sam li -->
<!--答案是 :(24*2)+30+(32~33)=110~111px -->

<!-- 123. Joey -->
<!-- Ans: 24 * 2 + 30 + 30 + (2~3) = 110 ~ 111px -->

[124.Dawn-7/5每日任務](https://hackmd.io/v_vlXXJARCWCGBto4yMKaQ?view)

<!-- 125. Min Chun Tsai -->
<!-- Ans : (24 * 2) + 30 + 30 +圖片底部多空白 2~3 = 110~111px -->

<!-- 126. Yurie -->
<!--
codepen:https://codepen.io/_u_jung/pen/JjNGard
Ans: (line-height 24px)*2 + margin-bottom 30px+ image-height 30px*/
/* answer: 108px -->

<!-- 127. Karen -->
<!-- .box 高度的算法：
文字以兩行計算：24px * 2 = 48px
.text的margin-bottom = 30px
整個.text的高度 = 48px + 30px = 78px
.image高度 = 30px
但img會有2-3px的誤差，因此總計 .box 答案為：
48 + 30 + 30 + 2~3= 110~111 (px)
-->

<!-- 128. Yvette -->
<!-- ANS：p=24*2=48px+30px+30px+3=111px
-->

<!-- 129. Gillian
24*2+30+30+(2~3)= 110~111px
-->

<!-- 130. Amber Kuo
24*2 =48
48 + 30 marge-buttom
78 + 30 圖高
108 + 2~3 約 110~111
-->
<!-- 131. Moose
答案 111px

行高24*2+margin-bottom30px+image height30px+image底部會多出3px
= 111px -->

<!-- 132. sejuan
box高度：行高24*2(p段落2行文字)+ margin-bottom 30 + image 30 +多出的2-3px
答案:110px~111px
-->

<!--
133. jessica chiu
兩行行距總和為48
.text的margin-bottom: 30px
img圖高30px
img若沒有寫display:block來區塊化，底部會多出現2~3px的空隙

所以.box的總高為48+30+30+2~3=110~111px
-->

<!-- 134. RitaHuang
https://hsuehfan.github.io/layout2021/20210706.html

24×2 (line-height=24px) +
30×1 (margin-bottom=30px) +
30×1 (image=30px)

總計: 108px
-->

<!--
135.大衛
行高24*2+margin30+圖片高度30+圖片預設空隙2~3=110~111
總計:110px~111px
-->
<!-- 136.袁祥恩 https://codepen.io/ovfxsavp-the-bashful/pen/XWRdRMd -->

<!-- 137.家齊
行高24*2(共兩行)+30 margin+30image+2~3 = 110 or 111
-->

<!-- 138.rose
.box高度為line-height(24+24)+30+圖高30+3=111px
https://codepen.io/roseling30/pen/NWjNXZL
-->
<!--139.LTL
Box 的高度= 24pxx2 (line-hight) + 30px (margin-bottom)+ 30px + image (image height) + 2 or 3 px (image圖片空隙) ,所以 box 高度應該是110~111之間-->

<!--140.鉦勝
p段落兩行(24px+24px)+margin-bottom(30px)+img高度(30px)+預設的img底部2~3px=111px-->

<!--141.Tina Yen
1.text 高度由line-height 撐起來，兩行就是24px*2=48px
2.加上底部一個margin 推擠30px
3.加上img 30px, 但是實際會是32-33px之間，因為img在遊覽器上會在推擠2-3px，除非加上移除的設定ex: display:block;
因此box高度為48px+30px+32pxor33px=110pxor111px。-->

<!-- 142. Jessie Cheng
文字是透過 lh 產生高度的，再加上 mb 往下推擠 30
img height 為 30，但底下會再多推擠 2~3 px
24*2 + 30 + 30 + 2~3 = 110~111 px
-->

<!-- 143. HarryChen
24*2+30+30+(2~3)= 110~111px
-->

<!--144. Freya
行高24px，兩行=48px+外距底部30px+圖片高度30px，(48px+30px+30px=108px)+ html img下方不明空隙高度可能2~3px ，總高約110px或111px-->

<!--145. 宸
line-height: 24*2+margin-bottom: 30+height: 30=108px

108px+img可能多2~3px=110~111px

<!-- 146. Johlmike
30px + 24px + 24px + 30px = 108px + 2~3px = 110~111px
-->

<!-- 147. Minnie
24px*2 + 30px + 30px + 2~3px = 110~111px
-->

<!-- 148. Louise
由於<p>段落文字部分是兩行，24+24+30+30=108，而圖片會在多個2~3px，因此總高度為110~111px
-->

<!-- 149. twoz
因為文字是以兩行呈現，所以行高要乘以2，再加上下方外距30px，再加上圖片高度30px，所以是24*2 +30 +30 =108，令圖片因為基準線的關係，下方會多出約3px的留白，所以總共是108 +3 =111px才對
-->
<!-- 150. 聿凌
兩行文字24px*2+底部30px+圖片30px+網頁預設圖片多2-3px=110-111px
-->
<!-- 151. Calon
24px*2(line-height)+30px(margin-bottom)+30px(height)+2px~3px(img預設留白) = 110px~111px
-->
<!-- 152. Adrian Li
文字段落兩行 24*2 + mb 30 + img height 30 + 圖片預設下方有 2~3 px 的 mb = 110~111
-->
<!-- 153. Cora
文字24*2=48px＋底部30px＋圖片30px＋圖片下方會多出2~3px=110~111px
-->

<!-- 154. Page
行高24*2=48+margin bottom 30px+圖片30px+img預設留白2~3px=110~111px
-->

<!-- 155. 三隻小貓
答案：110~111((24*2)+30+30)=108 加上圖片下方會有2~3px的空間
-->

<!-- 156. 林雨樞
答案： 24*2+30+30+(2~3) = 110~111 px
-->

<!-- 157. Zaii Hsu
答案：48(兩行文字行高)+30(margin bottom)+30(image高度)+2~3(img預設留白)=110~111px -->

<!-- 158. Oober
答案：48(line-height*2)+30(margin bottom)+30(image)+2~3(img預設留白)=110~111px -->

<!-- 159. Stacey Huang
答案: 48*2(文字行高)+30(image高度)+30(margin-bottom)+2~-3(image預設留白) = 110~111px
-->

<!-- 160. Tori
答案:
文字行高 24px*2 + mb30px + img 30px + img 預留 2px-3px = 108px~111px

<!-- 161. HankPan
答案: 24px*2 + 30px(margin-bottom) + 30px(img)+2~3px(img預設留白)= 110~111px
-->

<!-- 161. 葉小嵐
答案: 行高24x2+margin-bottom30px+img-h30px+img多出的2or3px=110
-->

<!-- 162. Pinky
答案: 110~102px -->

<!-- 163. pmy
答案： 110～111px
24x2+30+30+圖片預設多出來的2～3px -->

<!-- 164. Newman
答案： 110
line-height 24*2+ margin-bottom30+ img height30 =108
但圖片預設高度會比計算約多2px

<!--165. WA
答案:110~111
24*2+30+30+2~3
-->

<!--166. Harry
答案:110~111
24*2+30+30+2~3
-->

<!-- 177. Eason
答案: (24*2)+30+30+img不明高度2~3px = 110~111 -->