最近做項目發現引用圖片時下方總出現空白，情況如下圖所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img-box {
border: 2px solid red;
width: 550px;
}
</style>
</head>
<body>
<div class="img-box">
<img src="./img.png" alt="">
</div>
</body>
</html>
後發現原因是行內塊元素會和文字的基線對齊，要解決這個問題其實很簡單，主要方法有兩種：
1. 給圖片添加 vertical-align: middle | top | bottom 等。（推薦使用）
img {
vertical-align: bottom;
}
2. 把圖片轉換爲塊級元素 display: block; （轉換塊級元素可能會影響你的佈局，所以推薦使用第一種）
img {
display: block;
}
好啦，問題就這麼簡單的解決了。
如果大家有什麼更好的方法，歡迎交流，評論區留言哦~