1. 圖片底部有空隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
/* vertical-align: middle;*/
/* display: block;*/
}
div {
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<img src="images/3.jpg" height="252" width="448" alt="">
my name is allin
</div>
</body>
</html>
2. 原理
圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊(即默認vertical-align: baseline)。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。
3. 解決方法
3.1 方法一：vertical-align:top | bottom | middle
3.2 方法二： 將行內元素或行內塊元素轉換為塊級元素
4. PS: vertical-align
vertical-align不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。