HTML中四个图片并排显示：小间距排版技巧

<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
  display: flex;
gap: 5px; /* 设置图片之间的间距 */
}
<p>.image-container img {
width: 25%; /* 将每个图片占据一行的四分之一宽度 */
}
</style></p>
</head>
<body>
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
</body>
</html>
在上述示例中，`.image-container` 类设置了 `display: flex` 属性，使得其中的图片能够水平并排显示。`gap` 属性用于设置图片之间的间距，这里设置为5像素。`.image-container img` 类设置了每个图片的宽度为父容器的四分之一（即25%）。你可以将 `src` 属性的值替换为实际的图片路径。