如何调整Flex布局中图片的间距使其更紧凑？

我用以下HTML代码展示图片，当前通过justify-content: space-between排列图片，想让图片彼此更靠近。调整图片width只会放大图片，没法缩小间距，请问该怎么调整？

<div style="padding-inline: 200px;" align="center">
    
    <h2 style="font-size:4vw;">Melngalvju nams</h2> <br> <br>
    <h2 style="font-size:2vw;">Vēsture</h2>
    <p style="font-size:1.5vw;">Rīgas Melngalvju nams (vācu: Das Schwarzhäupterhaus) ir atjaunots 14.—19. gadsimta arhitektūras piemineklis, atrodas Vecrīgā pie Rātslaukuma. Celtne vairākkārt pārbūvēta, lielākās nama pārbūves notikušas 1580., 1619.—1625. un 1886. gadā. Otrā pasaules kara laikā nodedzis, 1999. gadā Melngalvju nams tika uzcelts no jauna. </p>

    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
        <img src="Vēsture01.jpg" alt="Melngalvju nams (pa kreisi) krievu sabombardētajā Rātslaukumā 1710. gada jūlijā" style="width: 35%;">
        <img src="Vēsture02.jpg" alt="Rīgas Melngalvju nams (labajā pusē) pēc sagraušanas 1941. gadā" style="width: 35%;">
    </div>
    <br> <br>
    <h2 style="font-size:2vw;">Nosaukums</h2>
    <p style="font-size:1.5vw;">Celtnes nosaukums radies no tās īpašniekiem Melngalvju brālības, kuras galvenais simbols bija svētais Maurīcijs, pirmais melnais kristietis, kareivju un neprecētu vīriešu aizgādnis. Viņš redzams nama ģerbonī un ir attēlots pie tā ieejas.</p>
    
    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
        <img src="Nosaukums01.jpg" alt="Rīgas Melngalvju nama portāls ar Svētās Marijas un Svētā Maurīcija ciļņiem" style="width: 35%;">
        <img src="Nosaukums02.jpg" alt="Melngalvju brālības svarīgākais simbols - svētajs Maurīcijs" style="width: 35%;">
    </div>
    <br> <br>
    <h2 style="font-size:2vw;">Arhitektūra</h2>
    <p style="font-size:1.5vw;">Pastāvēšanas laikā Melngalvju nams vairākkārt pārveidots, paplašināts un papildināts, tomēr nama abi zelmiņi daudz saglabājuši arī no pirmā un 15. gadsimta būves laika. Viduslaiku Livonijas laikā 14.—16. gadsimtā ēkai bija tā laika Hanzas pilsētu gotiskās celtniecības tradīcijām atbilstošs abu zelmiņu stateniskais akcentējums ar slaidām vienkāršu un profilētu ķieģeļu ierāmētām ielodzēm, ko noslēdza smails loks. Kopš 1522. gada ēkas ieeju rotāja Dievmātes un svētā Maurīcija attēli.</p>
   
    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
        <img src="Arhitektūra01.jpg" alt="Melngalvju nams 1924. gadā" style="width: 35%;">
        <img src="Arhitektūra02.jpg" alt="Melngalvju nama svētku zāle 19. gadsimta beigās" style="width: 35%;">
    </div>
    <br> <br>
</div>

问题核心是justify-content: space-between会把容器内所有剩余空间全部分配到两张图片之间——两张图各占35%宽度，加起来仅70%，剩下30%的空间都变成了中间的间距，所以才会显得过宽。下面是几种直接有效的调整方式：

方法1：用gap属性直接设置固定间距（最推荐） #

去掉justify-content: space-between，改用justify-content: center让图片居中，然后给flex容器加gap属性，直接控制两张图的间距大小，图片宽度保持35%不变：

<div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;">
    <img src="Vēsture01.jpg" alt="..." style="width: 35%;">
    <img src="Vēsture02.jpg" alt="..." style="width: 35%;">
</div>

你可以把gap: 20px改成任意数值（比如10px、15px），精准控制间距宽度。

方法2：限制flex容器的最大宽度 #

如果想保留space-between，可以给图片容器设置max-width，让容器本身变窄，剩余空间减少后，中间的间距自然变小：

<div style="display: flex; justify-content: space-between; max-width: 600px; margin: 0 auto 20px;">
    <img src="Vēsture01.jpg" alt="..." style="width: 48%;">
    <img src="Vēsture02.jpg" alt="..." style="width: 48%;">
</div>

这里把图片宽度改成48%，容器设固定最大宽度，margin:0 auto让容器居中，剩余的4%空间就是两张图的间距，也可以调整max-width的数值来控制间距。

方法3：给图片加margin控制间距 #

把justify-content改成flex-start，然后给第一张图片加margin-right，直接自定义间距：

<div style="display: flex; justify-content: flex-start; margin-bottom: 20px;">
    <img src="Vēsture01.jpg" alt="..." style="width: 35%; margin-right: 20px;">
    <img src="Vēsture02.jpg" alt="..." style="width: 35%;">
</div>

这种方式适合需要单独控制单边间距的场景，数值可根据需求调整。

内容的提问来源于stack exchange，提问作者ShadowedTotem