这个解决方案还允许您在图像之间添加空间。它结合了所有现有解决方案的最佳部分，并且没有添加任何丑陋的表边框。

<p align="center">
  <img alt="Light" src="./light.png" width="45%">
&nbsp; &nbsp; &nbsp; &nbsp;
  <img alt="Dark" src="./dark.png" width="45%">
</p>

关键是添加 不间断空格HTML实体，您可以添加和删除它们以自定义空格。

你可以在GitHub上的transituring -bullshit/nextjs- concept -starter-kit上看到这个例子。

我找到了一种方法，让3张图片在同一条线上左/中/右对齐，所以它会自动在它们之间添加合适的空间:

<p align="center">
      <img src="..." align="left">
      <img src="...">
      <img src="..." align="right">
</p>

这是我的实际用例的样子:

类似于其他例子，但使用html大小，我使用:

<img src="image1.png" width="425"/> <img src="image2.png" width="425"/> 

这里有一个例子

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" width="200"/> <img src="https://openclipart.org/download/71101/two.svg" width="300"/>

我用Remarkable进行了测试。

您可以将每个图像并排放置，方法是将每个图像的标记写在同一行上。

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

只要图像不是太大，它们将内联显示，如下图所示，这是一个来自GitHub的README文件截图:

这将显示三个图像并排如果图像不是太宽。

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

这个解决方案还允许您在图像之间添加空间。它结合了所有现有解决方案的最佳部分，并且没有添加任何丑陋的表边框。

<p align="center">
  <img alt="Light" src="./light.png" width="45%">
&nbsp; &nbsp; &nbsp; &nbsp;
  <img alt="Dark" src="./dark.png" width="45%">
</p>

关键是添加 不间断空格HTML实体，您可以添加和删除它们以自定义空格。

你可以在GitHub上的transituring -bullshit/nextjs- concept -starter-kit上看到这个例子。