---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/6(二) 每日任務

## 問題

嘗試在 .img 內加入 CSS 語法將圖片下的空白部分移除

<img class="img" src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo nostrum officiis aspernatur.</p>

.img{
  ...
}

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」中回報


<!-- 解答(擇一)：
1. display:block;
2. vertical-align:top/bottom/middle/text-top/text-bottom -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/XWMZNRV
-->

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/mdWxKdj
-->

<!-- 2.孫
https://codepen.io/Sunne/pen/mdWoRzO -->

<!-- 3. Jasmin
Codepen: https://codepen.io/thejasmin/pen/zYZaKyO
-->

<!--4.Alpha
Codepen: https://codepen.io/alphatero/pen/WNjrMPQ
-->

<!--5.kane0927
Codepen: https://codepen.io/kane-lin/pen/abWdqPE
-->

<!--6.lumei
Codepen:
https://codepen.io/l_umei/pen/wvdMyNv
-->

<!--7.Jamie
Codepen: https://codepen.io/JamieChenWs/pen/XWRXZOa
-->

<!--8. Vic
Codepen: https://codepen.io/hsuan333/pen/poPgaYE
-->

<!--9. Jean
Codepen: https://codepen.io/jean-liu/pen/gOWPvEJ
-->

<!--10. 童筱涵
Codepen: https://codepen.io/hsiaohan/pen/qBmbxLY
-->

<!--11. 黃羽均
Codepen: https://codepen.io/azzfgtpo/pen/MWmKQRJ
-->

<!--12. 肉鬆
Codepen: https://codepen.io/klrkicog/pen/ZEKQrNK
-->

<!--13.YOYO
codepen: https://codepen.io/lumedkle/pen/OJmMQeL
-->

<!--14. YEN
Codepen: https://codepen.io/Hoyi/pen/WNjrMqr
-->

<!--15. Joanna Chang
codepen:https://codepen.io/polilu1985/pen/KKmVQOg

<!--16. Archie
Codepen: https://codepen.io/WuChengHua/pen/zYwrRgp
-->

<!--17. Cheng Pei-hsuan
Codepen: https://codepen.io/PaCheng/pen/mdmVXNY
-->

<!-- 18. Phoebe
Codepen: https://codepen.io/phoebeho/pen/PomZRoY
-->

<!--09. Tracy曼娟
Codepen: https://codepen.io/tracychien-the-encoder/pen/eYWJMOE
-->

<!--19. Riley
Codepen: https://codepen.io/jjpxbprd/pen/gOWPeOV
-->

<!--20. Xing
Codepen: https://codepen.io/xing10/pen/KKmdOVG
-->

<!--21. Ning
Codepen: https://codepen.io/fangninglin/pen/oNWbqNa
-->

<!--22. Sz
Codepen:https://codepen.io/szyln/pen/rNmxdxp
-->

<!--23. Hung
Codepen:https://codepen.io/dorihung/pen/poPgLge
-->

<!--24. axlrock1021
Codepen:https://codepen.io/lnjbmmxo/pen/MWmKVyv
-->

<!--25. 叻叻豬
Codepen:https://codepen.io/ericxcode/pen/poPgLzR
-->

<!--26. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/rNyKVVa
-->

<!--27. Dida
img {
display: block;
}
-->

<!-- 28: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/KKmVovq?editors=1100
-->

<!--29. Jun Chan
Codepen: https://codepen.io/chujunchan/pen/NWjxYvb
-->

<!--30. LiShang
Codepen: https://codepen.io/li-shang/pen/bGWEvaB
-->

<!--31. Gill
Codepen: https://codepen.io/Gill-Chin/pen/JjNGLpx
-->

<!--32. 文文
// 方法一
.img{
display:block
}

// 方法二
.img{
vertical-align:top;
}
-->

<!--33. 阿瓜
答案：
1
display: block;

2
vertical-align:top;
-->

<!--34. WilsonHan
Codepen: https://codepen.io/wi0821/pen/ExmPELO
-->

<!-- 35: 雷古娜
Codepen: https://codepen.io/tinahopo/pen/RwVrMLw
-->

<!-- 36: 陳品宏
Codepen: https://codepen.io/wtka/pen/QWvymBM
-->

<!-- 37: 群嘉
Codepen: https://codepen.io/efzdamnp-the-lessful/pen/dyWGmjx
-->

<!-- 38: Lina Chen
Codepen: https://codepen.io/LinaChen/pen/wvdMmQJ
-->

<!-- 39: roger
Codepen:
https://codepen.io/rogerchuang/pen/RwVrMEW?editors=0110
-->

<!-- 40: yijun
codepen:
https://codepen.io/sandy3068/pen/NWjxMWw
-->

<!-- 41: Irene Wang
codepen: https://codepen.io/irene-wang-the-looper/pen/PomZewp
-->

<!-- 42: Kaka
codepen: https://codepen.io/potatokaka/pen/KKmVoGZ
-->

<!-- 43: Joseph Tang
codepen: https://codepen.io/joseph-tang/pen/poPgVJZ
-->

<!-- 44: will
codepen:https://codepen.io/will-liu/pen/wvdMmYJ?editors=1100
-->

<!-- 45: Joe Kuo
display: block
Codepen: https://codepen.io/alertislow/pen/eYWJrzx
-->

<!-- 46. ZY HSU
display:block -->

<!-- 47. Elaine Liu
codepen: https://codepen.io/elaine7598/pen/dyWGeNM -->

<!-- 48. Sam li-->
<!-- codepen: https://codepen.io/sam830623/pen/qBmbYmO -->

<!-- 49. Sans-ge -->
<!-- codepen:https://codepen.io/Sans-ge/pen/rNyOywZ -->

<!-- 50. Joey -->
<!-- codepen:https://codepen.io/joyfeel/pen/JjNGvBX -->

<!-- 51. 曹馨云 -->
<!-- image加入display:block 或加入 vertical-align -->

<!-- [52.Dawn-7/6每日任務] -->
<!--(https://https://codepen.io/DawnSyu/pen/jOmWxed) -->

<!-- 53. winnie -->
<!-- codepen: https://codepen.io/hsuanyu0115/pen/jOmWxdJ?editors=1100-->

<!-- 54. Joy Cheng
codepen https://codepen.io/joycheng5432/pen/xxdZjNE
-->

<!-- 55. 黃小瑄 -->
<!-- codepen:https://codepen.io/5quvgp2z/pen/ExmPLzK->
<!--56. Icy
codepen: https://codepen.io/ccsbjzze-the-sasster/pen/MWmKGGd
-->

<!-- 57. Scarlett 史嘉 -->
<!-- Codepen:https://codepen.io/qoxttdjg-the-encoder/pen/NWjxMaz?editors=1100 -->

<!-- 58. Alvin Chu
codepen:https://codepen.io/wave99487chu/pen/QWvyxWP
-->

<!-- 59. Sylvia-H
codepen:https://codepen.io/Cosmosheart/pen/QWvyxEX
-->

<!-- 60. Peggy Tsai
codepen:https://codepen.io/pei-chi-tsai/pen/poPgKNo
-->

<!-- 61. Cate Chang
codepen:https://codepen.io/tutz/pen/poPgKjz
-->

<!-- 62: Sec
加上 display: block 即可
-->

<!-- 63. huanan
codepen:https://codepen.io/hua_nan/pen/Vwbedxd
-->

<!-- 64. Winnie
codepen:https://codepen.io/winnie0208/pen/OJmMEZG
-->

<!-- 65. PHIL
codepen:https://codepen.io/ctkeftjp-the-animator/pen/NWjxzeP
-->

<!-- 66. Fleur
codepen:https://codepen.io/swwlee/pen/poPgKGb
-->

<!-- 67 Carol LEE
codepen: https://codepen.io/chiashiunlee/pen/wvdMXOv
-->

<!--68. natsu
codepen: https://codepen.io/natsu19/pen/oNWbMva
-->

<!-- 69 ZOE
codepen: https://codepen.io/Zoechiueh/pen/rNmxKPw?editors=1100
-->

<!-- 70. SihLe Huang
codepen: https://codepen.io/bugbug777/pen/dyWGKLq?editors=1100
-->

<!-- 71. Gui
codepen: https://codepen.io/guitimliu/pen/GRmoBKb
-->

<!-- 72. Min Chun Tsai
Codepen: https://codepen.io/Tsai0926/pen/OJmMwjM
-->

<!-- 73. 阿和
codepen: https://codepen.io/shnny/pen/JjNGaGP
-->

<!-- 74. Ruby Chiang
codepen: https://codepen.io/rubyyl0701/pen/QWvyVQV
-->

<!-- 75. Eric-小偉哥
codepen: https://codepen.io/ericLoveDesign/pen/MWmKqQR?editors=1111
-->

<!-- 76. Yurie
codepen: https://codepen.io/_u_jung/pen/YzVwOjV
-->

<!-- 77. hellocrab
codepen: https://codepen.io/hellocrab/pen/LYyGJJR
-->

<!-- 77. 格可
codepen: https://codepen.io/catabo/pen/xxdZyOq
-->

<!-- 78. anna
codepen: https://codepen.io/annhys/pen/poPgxRo
-->

<!-- 79. sarah
codepen: https://codepen.io/sarah-wang/pen/QWvyZrw?editors=1100
-->

<!-- 80. stepha
codrpen: https://codepen.io/w1112yb/pen/BaRjqPg
-->

<!-- 81. Gillian
https://codepen.io/gillianyy/pen/JjNGeYB
-->

<!-- 82. Yvette
ANS: .img{
display: block;
}
-->

<!-- 83. 阿熊
codepen: https://codepen.io/hsiungchi/pen/ZEKQmMo -->

<!-- 84. Paisley Chien
codepen: https://codepen.io/canaerkk/pen/vYmLQQE?editors=1100
-->

<!-- 84. Karen
ANS:

.img{
display: block;
}
-->

<!-- 86. Yao Lin
codepen: https://codepen.io/yaoyaoiii/pen/BaRjLBd
-->

<!-- 87. Meng
codepen: https://codepen.io/MGHN/pen/xxdZmKN
-->

<!-- 88. aSong
codepen:https://codepen.io/boisonchang/pen/oNWbJox
img{
display: block;
border: 1px solid #000;
}

p{
border: 1px solid #000;
}
-->

<!-- 89. 得源
img{
vertical-align:middle
}
-->
<!-- 90. 吐司
codepen: https://andy6804tw.github.io/2017/12/19/css-margin-space/
-->
<!-- 91.粘勝凱
codepen:
https://codepen.io/szykttdy/pen/ExmProm?editors=1100
-->

<!-- 92. Tansy
add display:block;
add outline to check the pixel difference (3px different)
codepan:
https://codepen.io/subarashii-huch09/pen/YzVwgxo

-->
<!-- 93. Hi Annie
codepen:https://codepen.io/lhohdalu/pen/ExmPMNL -->

<!-- 94. 黃士桓
codepen:https://codepen.io/shr-huan-huang/pen/BaRjbYz
使用display:block 當原生inline的img標籤改為區塊元素就不會吃到baseline的那個margin了
-->

<!-- 95. 周周
codepen:https://codepen.io/jhoujhou-the-decoder/pen/OJmMqZN
-->

<!-- 96. Jim Hwang
codepen:https://codepen.io/jimh1129/pen/wvdMOZJ
-->

<!-- 97. YuriT
codepen:https://codepen.io/wenfisht/pen/vYmLMxX
-->

<!-- 98. Una(點子數位)
codepen:https://codepen.io/xbsapbas-the-vuer/pen/xxdZeYG
-->

<!-- 99. Benson
Codepen：https://codepen.io/polarBear712/pen/xxdZejG
-->

<!-- 100. shanglin
codepen:
https://codepen.io/rmovuagr-the-selector/pen/RwVrOzj
-->

<!-- 101. KatieZhao
Codepen:
https://codepen.io/katiezhao/pen/rNmxgMx
-->

<!-- 102. Carol Li
codepen:
https://codepen.io/carolli834/pen/OJmMYpa
-->

<!-- 102. jimmyFang
codepen:
https://codepen.io/pohxiqqo/pen/bGWEyLP
-->

<!-- 103. jameskrauser
codepen:
https://codepen.io/jameskrauser/pen/WNjrBZV
-->

<!-- 104. Summer.H
codepen:
https://codepen.io/wan-chine/pen/NWjxVeW
-->

<!-- 105. yellamoon 巫樾
codepen:
https://codepen.io/pwbzvqja/pen/NWjxZqG
-->

<!-- 106. Stephanie Kan
codepen:
https://codepen.io/natsuki1114/pen/gOWPNaV?editors=1100
-->

<!-- 107. Erin Huang
codepen:
https://codepen.io/ErinHuang/pen/NWjxZbN
-->
<!-- 108. Moose
codepen:
https://codepen.io/EDCHEN/pen/qBmbzMv -->

<!-- 109. Luke Yan
https://codepen.io/jyyan/pen/NWjxZOp
-->

<!-- 110. Jocelyn
https://codepen.io/enjoyful/pen/XWRXLbz
-->

<!-- 111. Jerry Yen
https://codepen.io/JerryYen/pen/BaRjXdm
-->

<!--112. Blake Hung
https://codepen.io/Blakehong/pen/QWvyeZZ
-->

<!--113. Zooey Cheng
codepen:
https://codepen.io/noraneko0430/pen/WNjweXV?editors=1100
-->

<!--114. jessica chiu
ANS：
.img{
display:block;
}
-->

<!--115. sejuan
codepen:
https://codepen.io/sejuan/pen/bGWpGNd
-->

<!--116. Kin Hei Shing
.img{
display:block;
}
-->

<!--117. Nate Lu
.img{
display: block;
}
.img{
vertical-align: middle;
}
-->

<!--118. Froel
codepen: https://codepen.io/Froel/pen/yLbOypG
-->

<!--119. 沈依蓉
codepen: https://codepen.io/lily-oa/pen/wvdGKJK
.img{dispaly: block;}
-->

<!--120: RitaHuang
https://codepen.io/Rita-Rossweisse/pen/VwbajWR
-->
<!-- 121: 陳sam
https://codepen.io/euldpliv/pen/YzVqWmP
-->

<!-- 122: Jemma
https://codepen.io/Jemma9/pen/xxdVErK
-->

<!-- 123: AKI
https://codepen.io/akichen27/pen/XWRdMpG
-->

<!-- 124:zyc
https://codepen.io/zy_c/pen/bGWpqpr
有疑問，待解答
-->

<!-- 125:Coco
https://codepen.io/coco35532442/pen/LYyNyZW
-->
<!-- 126:袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/NWjNjvm
-->
<!-- 127:大衛
https://codepen.io/exnsrpjc/pen/xxdVdrg
-->
<!-- 128:mansonivan
.img{
display:block;
}
-->
<!-- 129:Shani
ANS:CODEPEN:https://codepen.io/ShaniMa/pen/KKmzyxq-->

<!-- 130:Alberto
ANS:CODEPEN:
https://codepen.io/AlbertoLL/pen/OJmNzWm
>

<!-- 131.家齊
.img{
display: block;
}
-->
<!-- 132.rose
https://codepen.io/roseling30/pen/YzVqewx
-->
<!-- 133:Pocky
ANS:CODEPEN:
https://codepen.io/lightfish311/pen/vYmGdrj?editors=1100
-->
<!-- 134. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A)-->

<!-- 135.ellie
img 標籤可以加上 display: block 來清除多餘的空白處
-->
<!-- 136.LTL
img 標籤加上 display: block , 請連結codepen
https://codepen.io/ltlin93/full/GRmZLvN
-->
<!-- 137.鉦勝
https://codepen.io/atckmax823/pen/bGWpXPM
-->
<!-- 138.魚魚
codepen:
https://codepen.io/YuYu_29/pen/ZEKOzVQ
-->

<!-- 139.Tina Yen
codepen:
https://codepen.io/tlorfrnl-the-typescripter/pen/WNjxGep
-->

<!-- 140. Jessie Cheng
Codepen:
https://codepen.io/JessieMosbi/pen/abWZByN
-->

<!-- 141. HarryChen
img 標籤可以加上 vertical-align: middle; or display: block; 來清除多餘的空白處
-->

<!-- 142. Freya
https://codepen.io/iyowai/pen/PopLJdY?editors=1100
-->

<!-- 143.宸
.img{
display: block;
}
-->

<!-- 144.Johlmike
https://codepen.io/johlmike/pen/ZEKOVjM
-->

<!-- 145.Minnie
1.
.img{
display: block;
}
2.
.img{
vertical-align: middle;
}
-->

<!-- 147. irene
CodePen：https://codepen.io/lohas1107/pen/xxdEVeR?editors=1100
-->

<!-- 148. Louise
.img{
display: block;
}
-->

[知識點](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)

<!-- 149. twoz
CodePen：
https://codepen.io/twoz/pen/oNWzLqy?editors=1100
-->

<!-- 150. Calon
.img{
display: block;
}
-->

<!-- 151. 聿凌
CodePen：
https://codepen.io/igzdflpu/pen/KKmggrQ
-->

<!-- 152. Adrian Li
CodePen:
https://codepen.io/thopoi5566/pen/abWmgJp
-->

<!-- 153. Cora
CodePen:
https://codepen.io/chakrafiregirl/pen/WNjoNjB
-->

<!-- 154. Page
1.display:block
2.vertical-align:top/bottom/text-top/text-bottom
-->

<!-- 155. 三隻小貓
在CSS img下以下任一方式
1.display:block
2.vertical-align:除了middle
3.font-size:0
-->

<!-- 156. 林雨樞
CodePen: https://codepen.io/FISH0701/pen/YzVwaWM
-->

<!-- 157. Zaii Hsu
CodePen：
https://codepen.io/ivy2846357/pen/yLbgNVK -->

<!-- 158. Oober
CodePen：
https://codepen.io/xtsjrjdv/pen/VwbPvqQ
-->

<!-- 159: Stacey Huang
https://codepen.io/staceyhuang/pen/wvdJMaO
-->

<!-- 160: Stacey Huang
https://codepen.io/manpower0708/pen/NWjpNLv?editors=1100
-->

<!-- 161: Tori
https://codepen.io/hayen/pen/KKmWXGZ?editors=1100
-->

<!-- 162: Tori
https://codepen.io/una607/pen/WNjoJwQ
-->

<!-- 163: Newman
https://codepen.io/newmankz/pen/mdmXVKy
-->

<!-- 164: WA
https://codepen.io/ldddl/pen/vYmrjar
-->

<!-- 165: Harry
[https:/](https://codepen.io/hyliao711/pen/NWjBwJY)

<!-- 166: Keep-
https://codepen.io/keep-/pen/vYZNWad
-->
<!-- 167: Eason
1. .img {display:block}
2. .img {vertical-align:middle}
-->