多個圖片排列展示，水平和垂直方向的間隔如何消除

垂直方向

vertical-align

原因： vertical-align屬性主要用于改變行內元素的對齊方式，行內元素默認垂直對齊方式是基線對齊（baseline）

這是因為圖片屬于行內元素，而行內元素的默認垂直對齊方式是基線對齊（baseline），這是給文本預留了部分顯示空間——基線與底線之間的距離（這部分空間會被某些文本占用）。
垂直對齊方式可以用四種不一樣的準線進行描述。以下圖所示，基線和底線之間還留有部分距離。

因為默認的對齊方案是按照英文的基線對齊，在不對垂直對齊方式進行調整的狀況下，圖片（底部）默認是和文本基線對齊（baseline）的，因為基線對齊，所以，圖片的下方就會產生一條空白縫隙的狀況。

總結：
給 img 標簽設置樣式：vertical-align:top/middle/bottom/baseline（基線，默認值），可控制當前img元素之前 / 后的文本，行內，行內塊與本 img 的垂直對齊方式。通常項目中，會把img的vertical-align設置為非基線，以防止圖片底部出現(xiàn)空白間隙。

把img標簽轉為塊級元素 display: block

因為這個空隙是因為行內元素引發(fā)的，而且vertical-align屬性是只有行內元素或行內塊元素才有的css屬性（img屬于行內塊元素），所以，使用 vertical-align 垂直對齊方式的前提是作用對象必須是行內元素 / 行內塊元素 , 否則垂直對齊效果不生效 , 也就是基線對齊不生效 。

所以，將img標簽顯示方式改為塊級元素，也可以解決圖片底部空白間隙問題，但要注意的是改變塊級元素之后圖片會獨占一行，可能會影響布局。

————————————————
版權聲明：本文為CSDN博主「儒雅的烤地瓜」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉載請附上原文出處鏈接及本聲明。
原文鏈接

總結

產生原因：由于img元素默認的垂直對齊方式為基線對齊vertical-aligh: baseline。
解決方法：

1. 給img標簽添加樣式 vertical-align: middle|top|bottom；
2. 給img標簽添加樣式 display: block

水平方向

原因： 在HTML中，img標簽是行內元素，它們之間的空格或換行符會被解析為文本節(jié)點。這些文本節(jié)點會占據(jù)一定的空間，導致img標簽之間產生縫隙的現(xiàn)象。

1. 將父容器的font-size設置為0。這樣可以使img標簽之間的空格不再占據(jù)空間，從而消除縫隙。
2. 使用浮動：為img標簽添加浮動，使它們脫離文檔流，從而消除縫隙。需要注意的是，浮動可能會影響其他元素的布局，需要根據(jù)實際情況進行調整。
3. 使用負的margin或padding：為img標簽設置負的margin或padding，使它們的邊距重疊，從而消除縫隙。需要根據(jù)實際情況調整負的margin或padding的值。【不推薦】
4. 使用flexbox布局：將img標簽放置在flex容器中，并使用flex布局來管理它們的位置。這樣可以自動消除縫隙。
   5. 使用注釋：在img標簽之間加入注釋，將其解析為HTML注釋節(jié)點，從而消除縫隙。