CSS 圖片不留空隙 如果你在網頁開發中使用了圖片，你可能會注意到一個問題：有時候，即使你將圖片設置為 display: block，它們仍然會在頂部或底部留出空白的空間。這是由于圖片默認的垂直對齊方式是 baseline（基線），而不是 top、middle 或 bottom。 為了解決這個問題，你可以通過在圖片上應用 CSS 的 vertical-align 屬性來指定垂直對齊方式。以下是一些常見的選項： - top：將圖片的頂部與行內元素的頂部對齊。 - middle：將圖片的中心與行內元素的基線對齊。 - bottom：將圖片的底部與行內元素的底部對齊。 - baseline：將圖片的基線與行內元素的基線對齊。 例如，如果你希望將圖片的底部與行內文本的底部對齊，你可以在 CSS 中添加以下代碼： ``` img { display: block; vertical-align: bottom; } ``` 這將使圖片的底部與行內元素的底部對齊，同時消除了圖片和下面的文本之間的空白空間。 值得注意的是，如果你在圖片周圍有其他元素（例如鏈接或邊框），你可能需要為這些元素設置相同的垂直對齊方式，以確保它們與圖片對齊。你也可以使用 vertical-align 屬性來對齊其他行內元素（例如文本），以創建更具吸引力的設計。 在網頁開發中，圖像是不可或缺的組成部分。但是，正確地處理它們以消除任何視覺差異是至關重要的，從而獲得最佳的用戶體驗。通過使用 vertical-align 屬性，你可以輕松地解決 CSS 圖片不留空隙的問題，獲得清晰、有吸引力的設計。