---

前言

在HTML和CSS中，img元素默認是行內元素(inline element)，類似于文本。由于文本有基線(baseline)，所以即使是空白的img元素也會占據一定的高度，以便使基線對齊。

---

解決辦法

要解決這個問題，可以使用CSS來覆蓋默認的行為，將img元素的vertical-align屬性設置為top或者bottom，這樣就可以移除其頂部的額外空白，使其緊貼著父容器的頂部或底部。

img {/* top|bottom */vertical-align: top;
}

---

另外，也可以將img元素設置為塊級元素(block element)，這樣它將不再遵循文本的基線對齊規則，而是占據整個父容器的寬度，且不會有額外的頂部空白。

img {display: block;
}

這些方法中的任何一個都可以解決img元素頂部額外高度的問題，具體取決于設計需求和布局。

---

vertical-align

MDN

CSS的屬性vertical-align用來指定行內元素(inline)或表格單元格(table-cell)元素的垂直對齊方式。

---

vertical-align屬性可被用于兩種環境
1、使行內元素盒模型與其行內元素容器垂直對齊。例如，用于垂直對齊一行文本內的圖片<img>。
2、垂直對齊表格單元內容。

---

注意: vertical-align只對行內元素、行內塊元素和表格單元格元素生效，不能用它垂直對齊塊級元素。