CSS 圖片下方出現空白是一個常見的問題，特別是在網頁設計中使用了多個圖片排列在一起的情況下，很容易出現這種情況。

img {
display: block;
margin: 0 auto;
}

上面這段 CSS 代碼是一個常見的解決方案。我們將圖片設為塊級元素，并通過設置 margin 屬性來消除圖片下方的空白。

除了這種方式外，還有其他一些常見的解決方案：

img {
display: block;
max-width: 100%;
height: auto;
}

通過設置 img 元素的 max-width 為 100% ，可以使圖片在其容器中自適應。同時，使用 height: auto 可以保持寬高比不變，避免圖片變形。

還可以使用 CSS Flexbox 以及 CSS Grid 來解決此類問題。但需要注意的是，在使用這些高級技術之前，應該確保它們的兼容性。

最后，可以在 HTML 頁面的 img 標簽中添加屬性來消除空白：

上面的代碼將圖片設置為 100% 寬度，并保持寬高比不變。這種方式可以在多種場景下使用，但需要注意對圖片進行壓縮，避免造成頁面加載速度過慢。